.footer{background-color:var(--red-5);position:relative;height:80px;width:100%;text-align:center;padding:30px;margin:0}.footer p{color:#fff;font-size:12px}@media screen and (max-width: 480px){.footer{height:auto;padding:20px}.footer p{font-size:10px}}@media screen and (min-width: 768px) and (max-width: 1024px){.footer{height:auto;padding:20px}.footer p{font-size:12px}}.navbar{display:flex;justify-content:center;margin-block:24px;background-color:#fff}.logo{width:320px;height:120px}@media screen and (max-width: 480px){.navbar{margin-block:16px;padding:8px}.logo{width:150px;height:auto}}@media screen and (min-width: 768px) and (max-width: 1024px){.navbar{margin-block:20px;padding:12px}.logo{width:180px;height:auto}}.search-bar{display:flex;align-items:center;justify-content:center;margin-block-start:48px;border:1px solid transparent;border-radius:32px;padding:24px;height:66px;width:100%;max-width:810px;background-color:var(--red-1)}.search-icon{width:30px;height:30px;margin-inline-start:12px;cursor:pointer}.search-input{border:none;outline:none;padding:44px;flex:1;font-size:16px;font-weight:600;background-color:transparent;height:100%;width:100%;color:var(--red-3)}.search-input::placeholder{color:var(--red-3)}@media screen and (max-width: 480px){.search-bar{padding:12px;margin-block-start:16px;border-radius:36px;height:50px;max-width:270px}.search-icon{width:20px;height:20px;margin-inline-start:6px}.search-input{padding:12px;font-size:12px}}@media screen and (min-width: 768px) and (max-width: 1024px){.search-bar{padding:14px;margin-block-start:20px;border-radius:40px;height:58px;max-width:380px}.search-icon{width:22px;height:22px;margin-inline-start:8px}.search-input{padding:16px;font-size:13px}}.hero-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px}.hero-icon{width:auto;height:20px;margin-right:12px}.toggle-icon{width:auto;height:32px}.favorites-icon{width:auto;height:14px}.sort-button,.favorites-button{display:flex;align-items:center}.sort-button{gap:20px}.favorites-button{gap:12px;margin-left:25px}.favorites-button.active{color:var(--red-4)}.hero-toolbar-left{color:var(--grey-3);font-weight:600}.hero-toolbar-right{display:flex;align-items:center;justify-content:space-between;margin-left:350px}.toggle-sort,.toggle-favorite{color:var(--red-3);font-size:14px;margin:0}@media (max-width: 480px){.hero-toolbar{flex-direction:column;gap:10px;margin-bottom:12px}.hero-icon{height:18px;margin-right:8px}.toggle-icon{height:28px;margin-right:20px}.favorites-icon{height:12px;margin-left:2px}.sort-button,.favorites-button{gap:16px}.favorites-button{margin-left:0}.hero-toolbar-right{padding-right:320px;gap:5px}.hero-toolbar-left{padding-right:40px}.toggle-sort,.toggle-favorite{font-size:12px}}@media (min-width: 768px) and (max-width: 1024px){.hero-toolbar{gap:15px;margin-bottom:12px}.hero-icon{height:18px}.toggle-icon{height:30px}.favorites-icon{height:13px}.sort-button,.favorites-button{gap:18px}.hero-toolbar-right{margin-left:30px}.hero-toolbar-left{margin-right:20px}}.home-container{padding:20px;text-align:center}h1{margin:10px 0;font-size:2rem;text-transform:uppercase;color:var(--grey-1);text-align:center}p{font-size:14px;color:var(--grey-2);text-align:center}.search-bar-container{display:flex;justify-content:center;align-items:center}.hero-toolbar,.character-list{margin:0}.hero-container{display:flex;flex-direction:column;align-items:center;margin-bottom:100px;margin-right:0}.hero-toolbar{margin-top:40px;margin-bottom:10px}.character-list{display:grid;grid-template-columns:repeat(4,1fr);gap:36px}.character-card{display:flex;flex-direction:column;align-items:center;position:relative}.character-image{width:220px;height:220px;border-bottom:5px solid var(--red-6)}.character-name-container{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:20px;margin-bottom:30px}.character-name{color:var(--grey-1);font-weight:700;margin:0}@media screen and (max-width: 480px){.character-list{grid-template-columns:1fr;gap:12px}.hero-container{margin-bottom:80px;margin-right:35px}.hero-toolbar{margin-top:30px;margin-bottom:5px}h1{font-size:1.25rem;margin:6px 0}p{font-size:11px;margin:0 20px}}@media screen and (min-width: 768px) and (max-width: 1024px){.character-list{grid-template-columns:repeat(2,1fr);gap:16px}.hero-container{margin-right:120px}h1{font-size:1.5rem;margin:8px 0}p{font-size:13px;margin:0 25px}}.hero-page{background-color:var(--blue-1)}.comic-text{padding-bottom:100px;padding-top:400px}.logo-hero{width:auto;height:64px;background:"none";border:"none";cursor:"pointer"}.topbar-container{display:flex;align-items:center;justify-content:flex-start;padding-left:80px;gap:90px;padding-top:30px}@media (max-width: 480px){.topbar-container{flex-direction:column;align-items:flex-start;padding-left:36px;gap:20px}}.search-heros{display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:32px;height:44px;width:620px;background-color:#fff}.search-heros-input{border:none;outline:none;padding:32px;flex:1;font-size:12px;font-weight:700;background-color:transparent;height:100%;width:100%;color:var(--grey-3)}.search-heros-input::placeholder{color:var(--grey-3)}.search-hero-icon{height:16px;width:16px;margin-inline-start:20px;cursor:pointer}@media (max-width: 480px){.search-heros{width:300px;padding:0 16px;height:50px}.search-heros-input{padding:8px 16px;font-size:10px}.search-hero-icon{height:14px;width:14px;margin-inline-start:10px}}@media (min-width: 768px) and (max-width: 1024px){.search-heros{width:50%;height:44px}.search-heros-input{font-size:11px}.search-hero-icon{height:16px;width:16px;margin-inline-start:15px}}.hero-details-container{display:flex;gap:20px;position:relative;padding-left:160px;z-index:2;overflow:hidden}.hero-details-container:before{content:attr(data-text);position:absolute;right:10px;top:40px;z-index:-1;font-size:220px;font-weight:bolder;color:#fff;text-align:right;pointer-events:none}.hero-details{width:300px;padding-left:0;padding-top:80px;display:flex;flex-direction:column;gap:20px;align-items:flex-start}.hero-details h2{margin:0;font-size:24px;color:var(--grey-1)}.hero-details h6{margin:0;color:var(--grey-1)}#description{color:var(--grey-2);font-size:12px}.hero-details p{margin:0;font-size:12px;text-align:left;color:var(--grey-1);font-weight:500}.hero-details .info-columns{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}.hero-details .info-columns div{display:flex;align-items:center}.hero-details .info-columns img{width:16px;height:16px;margin-right:8px}.hero-details .rating,.hero-details .last-comic{margin-top:20px;display:flex;align-items:center;gap:8px}.hero-details .comics,.hero-details .series,.hero-details .rating h6,.hero-details .last-comic h6{margin-right:0}.hero-image{width:auto;height:500px;max-width:100%;object-fit:cover;padding-top:30px}@media (max-width: 480px){.hero-details-container{padding-left:60px}.hero-container{flex-direction:column;padding-left:36px}.hero-container:before{font-size:100px;right:10px}.hero-details{width:300px;padding-top:40px}.hero-details h2{font-size:18px}.hero-details p{font-size:10px}.hero-image{display:none}@media (min-width: 768px) and (max-width: 1024px){.hero-container{flex-direction:column}.hero-container:before{font-size:150px;right:15px}.hero-details{width:80%;padding-top:60px}.hero-details h2{font-size:20px}.hero-details p{font-size:11px}.hero-image{height:400px}.hero-details .info-columns{grid-template-columns:1fr 1fr}.hero-details .rating,.hero-details .last-comic{flex-direction:row}}}.comic-container{padding-top:60px;padding-left:150px;display:flex;flex-direction:column;gap:20px;padding-bottom:150px}.comic-images{width:150px;height:260px;object-fit:cover}.comic-news h3{font-size:16px;text-align:left;width:100%}.comic-news{color:var(--grey-1)}.comic-grid{display:grid;grid-template-columns:repeat(6,1fr);padding-right:100px}.comic-item{text-align:center;margin-top:40px;gap:30px;padding-right:90px}.comic-container p{word-wrap:break-word;overflow-wrap:break-word;margin-top:10px;max-width:100%;text-align:center;color:var(--grey-1);font-weight:600}#comic-date{color:var(--grey-1);font-weight:400}@media screen and (max-width: 480px){h5{color:var(--grey-1);text-align:left;margin-bottom:16px;width:100%;font-size:14px}.comic-container{padding-top:30px;padding-left:36px;padding-bottom:50px;gap:12px}.comic-news{padding-left:20px;margin-top:30px}.comic-images{width:100px;height:160px}.comic-grid{grid-template-columns:repeat(2,1fr);gap:12px;padding-right:40px}.comic-item{text-align:center;padding-right:0}.comic-container p{font-size:12px;margin-top:8px}#comic-date{font-size:11px}}@media screen and (min-width: 768px) and (max-width: 1024px){h5{color:var(--grey-1);text-align:left;margin-bottom:18px;width:100%;font-size:16px}.comic-container{padding-top:40px;padding-left:50px;padding-bottom:100px;gap:16px}.comic-images{width:120px;height:200px}.comic-grid{grid-template-columns:repeat(3,1fr);gap:16px;padding-right:50px}.comic-item{text-align:center}.comic-container p{font-size:14px;margin-top:10px}#comic-date{font-size:13px}}:root{font-family:Work Sans,sans-serif;--red-1: #fdecec;--red-2: #fa7c7c;--red-3: #fa8787;--red-4: #ff0b0b;--red-5: #ff1510;--red-6: #e92429;--blue-1: #e7f6e7;--grey-1: #404040;--grey-2: #8c8c8c;--grey-3: #b9b9b9;--grey-4: #bdbdbd;--grey-5: #6d706d}*{margin:0;padding:0;box-sizing:border-box}body,html{height:100%;margin:0;display:flex;flex-direction:column}.app-container{display:flex;flex-direction:column;min-height:100vh}.main-content{flex:1}