@import url(https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600&display=swap);a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}:root{--main-red:#ee181e;--main-dark-grey:#212121;--border-lighter-grey:#555;--black:#000;--white:#fff}*{box-sizing:border-box}body{background-color:#000;background-color:var(--black);font-family:"Quicksand",sans-serif}.wrapper{margin:0 auto;width:90vw}a{text-decoration:none}a,button{color:#fff;color:var(--white)}button{cursor:pointer;background-color:#000;background-color:var(--black);border:1px solid #ee181e;border:1px solid var(--main-red);border-radius:10px;padding:10px;width:80px}button:hover{color:#ee181e;color:var(--main-red)}h2{font-size:20px;font-weight:700}.pagination{display:flex;justify-content:center;margin-bottom:20px}.pagination button:first-child{margin-right:30px}.not-found{display:flex;flex-direction:column;justify-content:center;margin-top:-20px}.not-found-details{position:absolute;top:60vh;right:100px;max-width:35%}.not-found-details h1{font-size:40px;margin-bottom:50px;font-weight:700}.not-found-details p{font-size:25px;line-height:30px}.loading{display:flex;justify-content:center;align-items:center;color:#fff;color:var(--white)}.loading,main.form{height:100vh}div.form h2{color:#fff;color:var(--white);text-align:center;margin-bottom:50px}.input-form{display:flex;flex-direction:column;width:50%;margin:0 auto}.input-form input{padding:10px;border-radius:10px;border:2px solid #ee181e;border:2px solid var(--main-red)}.form .btn-red,.input-form input:not(:last-child){margin-bottom:30px}.form .btn-red{background-color:#ee181e;background-color:var(--main-red);padding:10px;border:none;border-radius:10px;width:50%;margin-top:50px;font-weight:700;color:#fff;color:var(--white);cursor:pointer}.form .btn-red:hover{background-color:#fff;background-color:var(--white);color:#ee181e;color:var(--main-red)}form div:nth-child(2){display:flex;flex-direction:column;justify-content:center;align-items:center}form div:nth-child(2) a{font-size:14px;text-decoration:underline}.form span{color:#ee181e;color:var(--main-red)}.form span,header{margin-bottom:20px}header{padding:20px;height:35vh;background-color:#212121;background-color:var(--main-dark-grey);border-bottom:1px solid #555;border-bottom:1px solid var(--border-lighter-grey)}header div{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:calc(20vh - 40px)}header img{width:150px;margin-bottom:20px}header nav span:not(:last-child){margin-right:50px}header nav span:hover{border-bottom:3px solid #ee181e;border-bottom:3px solid var(--main-red)}header nav button{background-color:#ee181e;background-color:var(--main-red);width:100px;margin-right:20px}header nav button,header nav button:hover{border:2px solid #ee181e;border:2px solid var(--main-red)}header nav button:hover{background-color:#212121;background-color:var(--main-dark-grey)}.characters-search-bar,.comics-search-bar{padding:50px 0;display:flex;justify-content:center}.characters-search-bar input,.comics-search-bar input{width:50vw;padding:10px;border:2px solid #ee181e;border:2px solid var(--main-red);border-radius:5px}main .characters-wrapper,main .comics-wrapper{display:flex;flex-wrap:wrap;margin-bottom:30px}.characters-card,.comics-card{background-color:#fff;background-color:var(--white);border-radius:0 0 10px 10px;width:calc(20% - 8px);margin-bottom:10px;color:#000;color:var(--black)}.characters-wrapper .characters-card:not(:nth-child(5n)),.comics-wrapper .comics-card:not(:nth-child(5n)){margin-right:10px}.characters-wrapper :hover{opacity:1;animation:flash 1.5s}@keyframes flash{0%{opacity:.8}to{opacity:1}}.characters-card-img,.comics-card-img{background-color:#000;background-color:var(--black)}.characters-card img,.comics-card img{width:100%;height:250px;object-fit:cover;object-position:left;border-radius:10px 10px 0 0}.characters-card-details,.comics-card-details{padding:10px 10px 20px;display:flex;flex-direction:column;align-items:center}.characters-card-details span,.comics-card-details span{font-weight:700;font-size:18px;text-align:center;margin-bottom:20px;color:#ee181e;color:var(--main-red)}.character-bloc{display:flex;padding-top:50px}.character-bloc-1{width:40%;padding:20px;display:flex;flex-direction:column;align-items:center;color:#fff;color:var(--white)}.character-bloc-1 h2{margin-bottom:50px}.character-bloc-1 img{width:300px;height:300px;object-fit:cover;border-radius:50%;border:4px solid #ee181e;border:4px solid var(--main-red);margin-bottom:50px}.character-bloc-1 p{text-align:justify}.character-bloc-2{font-size:14px;width:60%}.character-bloc-2 img{width:150px;height:225px;object-fit:cover;object-position:right;border-radius:0 8px 8px 0}.character-bloc-2-comic{border:3px solid #ee181e;border:3px solid var(--main-red);height:231px;background-color:#fff;background-color:var(--white);border-radius:10px;display:flex;justify-content:space-between}.character-bloc-2-comic div:first-child{padding:20px}.character-bloc-2 .character-bloc-2-comic:not(:last-child){margin-bottom:10px}.character-bloc-2-comic span{font-weight:700;font-size:18px;text-align:center;color:#ee181e;color:var(--main-red)}.character-bloc-2-comic p{height:120px;margin-top:20px;max-height:20vh;overflow:hidden;overflow-y:scroll}footer{background-color:#212121;background-color:var(--main-dark-grey);height:8vh;display:flex;justify-content:center;align-items:center;border-top:1px solid #555;border-top:1px solid var(--border-lighter-grey)}footer p{color:#fff;color:var(--white);font-size:12px}footer a{color:#ee181e;color:var(--main-red);font-weight:700}footer a:hover{border-bottom:2px solidvar(--main-red)}@media (max-width:1260px){.characters-card,.comics-card{width:calc(25% - 10px)}.characters-wrapper .characters-card:not(:nth-child(5n)),.comics-wrapper .comics-card:not(:nth-child(5n)){margin-right:0}.characters-wrapper .characters-card:not(:nth-child(4n+4)),.comics-wrapper .comics-card:not(:nth-child(4n+4)){margin-right:10px}}@media (max-width:1080px){.characters-card,.comics-card{width:calc(33.33333% - 10px)}.characters-wrapper .characters-card:not(:nth-child(3n+3)),.comics-wrapper .comics-card:not(:nth-child(3n+3)){margin-right:10px}}@media (max-width:880px){.characters-card,.comics-card{width:calc(50% - 10px)}.characters-wrapper .characters-card:not(:nth-child(2n+2)),.comics-wrapper .comics-card:not(:nth-child(2n+2)){margin-right:10px}.character-bloc-1 img{width:250px;height:250px}.character-bloc-2 img{width:140px;height:200px}.character-bloc-2-comic{height:206px}}@media (max-width:730px){.character-bloc{flex-direction:column;align-items:center;padding-top:20px}.character-bloc-1 h2{margin-bottom:30px}.character-bloc-1 img{width:200px;height:200px;margin-bottom:20px}.character-bloc-2{width:80%}}@media (max-width:600px){.form .btn-red,.input-form{width:70%}header{height:32vh}header div{height:10vh}header img{width:120px}header nav span{font-size:14px}header nav span:not(:last-child){margin-right:30px}header nav button{width:80px;font-size:12px}.characters-search-bar input,.comics-search-bar input{width:70vw}.characters-card,.comics-card{width:calc(25% - 10px)}.characters-wrapper .characters-card:not(:nth-child(4n+4)),.comics-wrapper .comics-card:not(:nth-child(4n+4)){margin-right:10px}.characters-card img,.comics-card img{height:100px}.hidden{display:none}.characters-card-details span,.comics-card-details span{font-size:14px}.character-bloc-2 img{height:200px}.character-bloc-2-comic{height:206px}}
/*# sourceMappingURL=main.9ec69241.chunk.css.map */