@import url(https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap);.button{background-color:#0000;border:none;color:#fff;cursor:pointer;font-size:14px;min-width:101px;text-align:center;text-transform:uppercase;transition:transform .3s}.button__long{display:block;margin:45px auto 0;width:170px}.button .inner{background-color:#9f0013;line-height:18px;padding:0 18px;position:relative;transition:none}.button .inner:before{left:0;top:-10px}.button .inner:after,.button .inner:before{border-color:#9f0013 #0000;border-style:solid;border-width:0 0 10px 10px;content:"";display:block;position:absolute;transition:none}.button .inner:after{bottom:-10px;right:0;transform:rotate(180deg)}.button__main:hover,.button__secondary:hover{color:#fff}.button__secondary .inner{background-color:#5c5c5c}.button__secondary .inner:after,.button__secondary .inner:before{border-color:#5c5c5c #0000;transition:none}.button:before{margin-left:10px}.button:after,.button:before{content:"";display:block;height:10px;transition:none}.button:after{margin-right:10px}.button.button__main:after,.button.button__main:before{background-color:#9f0013}.button.button__secondary:after,.button.button__secondary:before{background-color:#5c5c5c}.button:hover{transform:translateY(-5px)}.button:disabled{filter:grayscale(.5)}*{box-sizing:border-box;font-family:Roboto Condensed,sans-serif;margin:0;padding:0;position:relative}::-webkit-scrollbar{background-color:#b9b8b8;width:10px}::-webkit-scrollbar-thumb{background-color:#6c5c5c}body{background-color:#d1cccc}dl,li,ul{list-style-type:none;margin:0;padding:0}a{display:inline-block}a,a:hover{color:inherit;text-decoration:none}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.pulse{animation:pulse 1.5s ease-in-out .5s infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.wrapper{margin:0 auto;max-width:80%;position:relative}.char__content{display:grid;grid-template-columns:auto 350px;margin-top:40px;padding-bottom:10px;position:relative}.full{min-height:800px;width:100%}.char_panel{height:350px;margin:0 auto;position:sticky;top:30px}@media screen and (max-width:1024px){.char__content{grid-template-columns:auto 250px}.char_panel{width:250px}}@media screen and (max-width:768px){.wrapper{max-width:100%}.char__content{margin-left:5px;margin-right:5px}}@media screen and (max-width:555px){.char__content{grid-template-columns:auto}.charList{grid-area:2}.char_panel{height:auto;margin-bottom:50px;position:relative;width:100%}.char_panel .char__info{grid-template-columns:1fr 1fr;grid-template-rows:1fr}}@media screen and (max-width:320px){.char__content{margin:0}}.banner{align-items:center;box-shadow:5px 5px 20px #00000040;display:grid;grid-template-columns:repeat(2,50%);position:relative}.banner__info{background:#fff;display:grid;grid-template-columns:repeat(2,auto);height:250px;padding:20px}.banner__info .img{align-items:center;border-radius:4px;display:flex;justify-content:center}.banner__info .img img{height:190px;image-rendering:pixelated;max-width:190px;object-fit:contain}.banner__info .description{display:grid;grid-template-rows:repeat(3,auto);text-align:center}.banner__info .description .information{color:#000;font-size:16px}.banner__info .description .buttons{align-items:center;display:flex;justify-content:space-evenly}.banner__random{background:#232222;color:#fff;display:grid;grid-template-rows:repeat(3,auto);height:250px;padding:20px;position:relative}.banner__random img{bottom:15px;position:absolute;right:0}.banner__random .button{max-width:150px}@media screen and (max-width:1024px){.banner{display:block}.banner__info{grid-template-columns:repeat(2,auto);text-align:center}}@media screen and (max-width:425px){.banner__info{display:block;height:auto;padding-top:5px}.banner__info .description h1{font-size:20px}.banner__info .img img{height:130px;max-width:130px}.banner__random h2,.banner__random h3{font-size:18px}.banner__random img{width:155px}}@media screen and (max-width:320px){.banner__random img{width:130px}}.skeleton__header{grid-column-gap:10px;align-items:center;column-gap:10px;display:grid;grid-template-columns:40px auto}.skeleton__circle{background-color:#c4c4c4;border-radius:100%;height:40px;width:40px}.skeleton__mini{height:16px}.skeleton__block,.skeleton__mini{background-color:#c4c4c4;width:100%}.skeleton__block{height:35px;margin-top:15px}.char__wrapper{background:#fff;border-top-left-radius:10px;border-top-right-radius:10px;box-shadow:0 0 20px #00000040;padding:25px;z-index:5}.char__info{grid-gap:20px;display:grid;grid-template-columns:3fr 7fr;margin-bottom:15px}.char__info-img{border-radius:5px;image-rendering:pixelated;max-height:180px;max-width:180px}.char__info-desc{display:grid;grid-template-columns:1fr}.char__options{display:flex;font-size:18px;font-weight:700;justify-content:left;line-height:24px;margin-top:20px}.char__comics{max-height:150px;overflow-y:auto}.char__comics-item{box-shadow:0 4px 4px #00000040;font-size:15px;line-height:25px;margin-top:10px;padding:0 10px}@media screen and (max-width:1024px){.char__wrapper p{font-size:80%}.char__info{grid-gap:0;grid-template-columns:1fr;grid-template-rows:repeat(2,1fr);margin:0;text-align:center}.char__info img{height:150px;margin:auto;width:150px}.char__comics{max-height:100px}.char__comics-item{font-size:13px}}@media screen and (max-width:555px){.char__wrapper{width:100%}.char__wrapper .char__info img{height:150px;width:250px}.char__wrapper .char__info h3{font-size:18px}.char__wrapper .char__info a{font-size:12px;margin:0 auto;width:70%}.char__comics{font-size:18px}.char__comics-item{font-size:16px}}.charList ul{grid-gap:30px;display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,200px));justify-content:space-around}.charList ul li{border-bottom-left-radius:10px;border-bottom-right-radius:10px;border-top-left-radius:10px;border-top-right-radius:10px;box-shadow:5px 5px 20px #00000040;transition:transform .3s}.charList ul li button{border:none;border-bottom-left-radius:10px;border-bottom-right-radius:10px;border-top-left-radius:10px;border-top-right-radius:10px;cursor:pointer;width:100%}.charList ul li img{border-top-left-radius:inherit;border-top-right-radius:inherit;height:200px;image-rendering:pixelated;width:100%}.charList ul li div{background-color:#232222;border-bottom-left-radius:5px;border-bottom-right-radius:5px;color:#fff;font-size:16px;font-weight:700;height:100px;margin-top:-5px;padding:20px 0 0 10px}.charList ul li:hover{filter:drop-shadow(0 5px 20px #000000);margin-bottom:10px;margin-top:-10px}.charList .active,.charList ul li.active:hover{filter:drop-shadow(0 5px 20px #ba0419)}.charList .active{margin-bottom:10px;margin-top:-10px}.list-enter{opacity:0}.list-enter-active{opacity:1;transition:opacity 2s}.list-exit{opacity:1}.list-exit-active{opacity:0;transition:opacity 2s}@media screen and (max-width:1025px){.charList ul{grid-gap:10px;display:grid;grid-template-columns:repeat(auto-fill,130px)}.charList ul li{width:120px}.charList ul li img{height:120px}}@media screen and (max-width:425px){.charList button{margin-bottom:20px}.charList ul{grid-template-columns:repeat(2,120px)}.charList ul li{height:200px}.charList ul li img{height:120px}.charList ul li button div{height:80px}}@media screen and (max-width:320px){.charList ul{grid-gap:30px}}.char__search-form{background-color:#fff;border-radius:5px;box-shadow:0 0 20px #00000040;margin-bottom:20px;padding:25px;position:relative;z-index:5}.char__search-label{color:#000;display:block;font-size:18px;font-weight:700;line-height:24px}.char__search-wrapper{align-items:center;display:flex;justify-content:space-between;margin-top:10px}.char__search-wrapper input{background:#fff;border:none;border-radius:5px;box-shadow:0 4px 4px #00000040;font-size:14px;height:38px;margin-right:5px;padding:0 10px}.char__search-error{color:#9f0013;font-size:16px;font-weight:700;line-height:24px}.char__search-critical-error{margin-top:10px}.char__search-success{color:#03710e;font-size:18px;font-weight:700;line-height:24px;margin-top:-10px}@media screen and (max-width:1024px){.char__search-wrapper{display:block;text-align:center}.char__search-wrapper input{margin-bottom:5px}}@media screen and (max-width:555px){.char__search-form{text-align:center}.char__search-wrapper{display:flex;justify-content:space-around}}
/*# sourceMappingURL=main.31673e91.css.map*/