header{width:100%;height:80vh;position:relative;background-color:#f5f8f8}header .header-image{width:100%;height:100%}header .header-image img{width:100%;height:100%;object-fit:cover}header .header-image-opacity img{display:none}header nav{width:100%;height:80px;position:fixed;top:0;z-index:1;background-color:#d8e3e6;border-bottom:1px solid #d3d3d3}header nav ul{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:80%;height:100%}header nav ul .logo h1{display:flex;align-items:center;color:#000;font-size:3em}header nav .active-menu{display:flex;grid-gap:10px;gap:10px}header nav .active-menu a{text-decoration:none;text-transform:uppercase;color:#000;position:relative}header nav .active-menu a:hover:after{position:absolute;bottom:0;left:0;content:"";height:1px;width:100%;background-color:#000}header .burger{display:none}header .form{width:30%;margin:150px auto;padding:50px;box-shadow:0 0 10px 6px rgba(0,0,0,.71);position:relative}header .form .closure{position:absolute;width:40px;height:40px;top:0;right:0;transform:translate(50%,-50%);background-color:#d2f6b8;border-radius:50%}header .form .closure span{content:"";display:block;height:4px;width:70%;background-color:#000}header .form .closure span:first-child{transform:translate(6px,18px) rotate(45deg)}header .form .closure span:last-child{transform:translate(5px,14px) rotate(-45deg)}header .form h1{text-align:center;margin-bottom:80px;letter-spacing:2px}header form{width:100%;display:flex;flex-direction:column;grid-gap:30px;gap:30px}header form input{padding:20px;border:none;border-radius:6px}header form p{text-align:center;text-decoration:underline;cursor:pointer}header form input[type=email],header form input[type=password],header form input[type=text]{font-family:"Roboto",sans-serif;color:#000;font-weight:700;outline:none;border-radius:40px;letter-spacing:1.5px}header form input[type=submit]{cursor:pointer;background-color:#efbbc4;color:#41505b;border:none;border-radius:6px;min-width:100px;margin:0 auto}@media screen and (max-width:1000px){.header{width:90%}header nav ul .logo h1{font-size:2em}header .form{width:70%;padding:40px}}@media screen and (max-width:600px){header nav ul .logo h1{text-align:center}header nav .active-menu{display:none}header .burger{display:block;width:42px;height:24px;cursor:pointer;position:relative}header .burger span{display:block;top:50%;transform:translateY(-50%)}header .burger span,header .burger span:after,header .burger span:before{width:100%;height:4px;background-color:#000;position:absolute;transition:.5s ease-in-out}header .burger span:after,header .burger span:before{content:""}header .burger span:before{transform:translateY(-10px)}header .burger span:after{transform:translateY(10px)}header .burger.active span{background-color:transparent}header .burger.active span:before{transform:translateY(0) rotate(45deg)}header .burger.active span:after{transform:translateY(0) rotate(-45deg)}header .form{width:90%}}.character-section{width:100%}.character-section h1{font-size:3em;letter-spacing:4px;text-align:center;margin:40px auto 80px}.character-list{width:100%;display:flex;flex-wrap:wrap;justify-content:center;grid-gap:30px;gap:30px}.character-list .character-image{height:500px;width:235px;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;background-color:#fff}.character-list .character-image:hover{box-shadow:0 0 10px 6px rgba(0,0,0,.71);transition:box-shadow .5s ease-in-out}.character-list .character-image img{width:100%;height:100%;border-radius:6px;object-fit:cover;overflow:hidden}.character-list .character-image .description{padding:30px;color:#000;text-align:justify}.character-list .character-image .description h4{text-align:center;font-size:1.1em;margin-bottom:10px}.character-data{width:100%}.character-data .character-image{width:50%;height:500px;margin:-300px auto 0}.character-data .character-image img{width:100%;height:100%;object-fit:contain}.character-data .character-description{width:33%;margin:40px auto 80px;position:relative}.character-data .character-description h1{font-size:1.5em;text-align:center;margin-bottom:2em;text-decoration:underline}.character-data .character-comics-list{display:flex;flex-direction:row;justify-content:center;flex-wrap:wrap;grid-gap:30px;gap:30px;width:100%}.character-data .character-comics-list .charachter-comics{height:650px;width:280px;border-radius:6px;overflow:hidden;background-color:#fff}.character-data .character-comics-list .charachter-comics img{width:100%;height:50%;object-fit:contain}.character-data .character-comics-list .comic-information{height:50%;width:100%}.character-data .character-comics-list .comic-information h4{text-align:center;font-size:1.5em;margin-bottom:10px}.character-data .character-comics-list .comic-information p{padding:10px;text-align:justify}.character-data .character-description .not-favoris{color:green;font-size:2em;position:absolute;bottom:-10%;left:50%;transform:translate(-50%,100%)}.character-data .character-description .favoris{color:red;font-size:2em;position:absolute;bottom:-10%;left:50%;transform:translate(-50%,100%)}@media screen and (max-width:1000px){.character-data .character-image{width:70%;height:500px;margin:20px auto}.character-data .character-description{width:55%;margin:40px auto 80px;position:relative}}@media screen and (max-width:600px){.character-data .character-image{width:85%;height:500px;margin:20px auto}.character-data .character-description{width:55%;margin:40px auto 80px;position:relative}}.filter{display:flex;align-items:center;justify-content:center;width:40%;margin:50px auto;border:1px solid #d3d3d3;border-radius:6px;padding:10px;background-color:#fff}.filter:hover{box-shadow:0 0 10px 6px rgba(0,0,0,.71);transition:box-shadow .5s ease-in-out}.filter button{background-color:#efbbc4;color:#41505b}.filter button,.filter button:hover{padding:10px;border:none;border-radius:15px}.filter button:hover{background-color:#0e341c;color:#efeeee;transition:background-color .5s ease-in-out,color .5s ease-in-out}.filter form{display:flex;justify-content:space-evenly;width:100%}.filter form input[type=search]{border:none;border-bottom:1px solid #41505b;color:#41505b}@media screen and (max-width:1000px){.filter{width:70%}.filter button{padding:5px}}@media screen and (max-width:600px){.filter{width:95%;box-shadow:none;background-color:#f5f8f8}.filter button{padding:3px;height:40px;min-width:70px}}.comics-section{width:100%}.comics-section h1{font-size:3em;letter-spacing:4px;text-align:center;margin:40px auto 80px}.comics-section .comics-list{width:100%;display:flex;flex-wrap:wrap;justify-content:center;grid-gap:50px;gap:50px}.comics-section .comics-list .comic-image{height:500px;width:235px;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;background-color:#fff;position:relative}.comics-section .comics-list .comic-image:hover{box-shadow:0 0 10px 6px rgba(0,0,0,.71);transition:box-shadow .5s ease-in-out}.comics-section .comics-list .comic-image img{width:100%;height:100%;object-fit:cover;overflow:hidden;border-radius:6px}.comics-section .comics-list .comic-image .description{padding:30px;color:#000;text-align:justify}.comics-section .comics-list .comic-image .description h4{text-align:center;font-size:1.1em;margin-bottom:10px}.mobile-menu{display:none}@media screen and (max-width:600px){.mobile-menu{display:block;width:100vw;position:absolute;top:80px}.mobile-menu a li{height:60px;line-height:2em;font-size:2em;margin:40px 0;position:relative;cursor:pointer;text-transform:uppercase}.mobile-menu a li:after{position:absolute;content:"";height:1px;width:100%;background-color:#000;bottom:0;left:-13px}}.comic-data{width:100%}.comic-data .comic-image{width:50%;height:500px;margin:-300px auto 0}.comic-data .comic-image img{width:100%;height:100%;object-fit:contain}.comic-data .comic-description{width:33%;margin:40px auto 80px;position:relative}.comic-data .comic-description h1{font-size:1.5em;text-align:center;margin-bottom:2em;text-decoration:underline}.comic-data .comic-description .not-favoris{color:green;font-size:2em;position:absolute;bottom:-10%;left:50%;transform:translate(-50%,100%)}.comic-data .comic-description .favoris{color:red;font-size:2em;position:absolute;bottom:-10%;left:50%;transform:translate(-50%,100%)}@media screen and (max-width:1000px){.comic-data .comic-image{width:70%;height:500px;margin:20px auto}.comic-data .comic-description{width:55%;margin:40px auto 80px;position:relative}}@media screen and (max-width:600px){.comic-data .comic-image{width:85%;height:500px;margin:20px auto}.comic-data .comic-description{width:70%;margin:40px auto 80px;position:relative}}.home-section{width:100%}.home-section .home-menu{margin-top:50px;display:flex;width:100%}.home-section .home-menu .left-col,.home-section .home-menu .right-col{width:50%;height:100%;margin-right:50px;cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center}.home-section .home-menu .left-col img,.home-section .home-menu .right-col img{width:100%;object-fit:cover;border-radius:6px}.home-section .home-menu .left-col img:hover,.home-section .home-menu .right-col img:hover{box-shadow:0 0 10px 6px rgba(0,0,0,.71);transition:box-shadow .5s ease-in-out}.home-section .home-menu h1{font-size:3em;letter-spacing:3px;margin:40px auto 80px;text-align:center}@media screen and (max-width:760px){.home-section .home-menu{display:flex;flex-direction:column;align-items:center;grid-gap:50px;gap:50px}.home-section .home-menu .left-col,.home-section .home-menu .right-col{width:100%;height:100%;margin-right:0}.home-section .home-menu .left-col img,.home-section .home-menu .right-col img{width:100%;height:100%;object-fit:cover}}.lds-roller{display:inline-block;position:relative;width:80px;height:80px}.lds-roller div{animation:lds-roller 1.2s cubic-bezier(.5,0,.5,1) infinite;transform-origin:40px 40px}.lds-roller div:after{content:" ";display:block;position:absolute;width:7px;height:7px;border-radius:50%;background:#000;margin:-4px 0 0 -4px}.lds-roller div:first-child{animation-delay:-36ms}.lds-roller div:first-child:after{top:63px;left:63px}.lds-roller div:nth-child(2){animation-delay:-72ms}.lds-roller div:nth-child(2):after{top:68px;left:56px}.lds-roller div:nth-child(3){animation-delay:-.108s}.lds-roller div:nth-child(3):after{top:71px;left:48px}.lds-roller div:nth-child(4){animation-delay:-.144s}.lds-roller div:nth-child(4):after{top:72px;left:40px}.lds-roller div:nth-child(5){animation-delay:-.18s}.lds-roller div:nth-child(5):after{top:71px;left:32px}.lds-roller div:nth-child(6){animation-delay:-.216s}.lds-roller div:nth-child(6):after{top:68px;left:24px}.lds-roller div:nth-child(7){animation-delay:-.252s}.lds-roller div:nth-child(7):after{top:63px;left:17px}.lds-roller div:nth-child(8){animation-delay:-.288s}.lds-roller div:nth-child(8):after{top:56px;left:12px}@keyframes lds-roller{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}footer{text-align:center;padding:20px;margin-top:40px;background-color:#d8e3e6}*{padding:0;margin:0;box-sizing:border-box}body{font-family:"Roboto",sans-serif;background-color:#f5f8f8;font-size:14px;line-height:20px}li,ul{list-style:none}.wrapper{width:80%;margin:0 auto;position:relative}a{text-decoration:none;text-transform:uppercase;color:#000}@media screen and (max-width:1000px){.wrapper{width:90%}}@media screen and (max-width:600px){.wrapper{width:95%}}
/*# sourceMappingURL=main.ad614506.chunk.css.map */