*{margin:0;padding:0;box-sizing:border-box}body{background-color:#313e50;color:#fdfffc;font-family:Arial,Helvetica,sans-serif;font-weight:500}.errorPage{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100vw;height:100vh;padding:0 5vw}.errorPage__title{font-size:1.5rem}.errorPage__image{width:80vw;max-width:500px;margin-top:2rem;margin-bottom:1rem;border-radius:5px;transition:all .3s ease-in-out}.errorPage__text{font-family:Arial,Helvetica,sans-serif;font-size:1.5rem;font-weight:500}.details:hover{cursor:pointer}.button{margin-top:1rem;padding:.5rem 1rem;border-radius:5px;background-color:#fdfffc;color:#1d3557;transition:all .3s ease-in-out;-webkit-user-select:none;user-select:none}.button:hover{box-shadow:0 0 10px 5px #777;cursor:pointer;transition:all .3s ease-in-out}.button:active{box-shadow:0 0 5px 3px #000;scale:.95;cursor:pointer;transition:all .3s ease-in-out}.errorButton__container{width:100%;height:200px;display:flex;justify-content:flex-start;align-items:center;max-width:400px;margin:10px auto;padding:30px;background-image:url(/RS_React/20-minutes-adventure-before.gif);background-position:center;background-repeat:no-repeat}.header-container{display:flex;align-items:center;justify-content:space-between}.charactersEachPage{width:150px;height:30px;margin:0 auto;background-color:#f1f1f133;border:thin solid black;color:#000;border-radius:4px;display:inline-block;font:inherit;line-height:1em;padding:.3em 1em .3em .8em;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.searchForm{width:30%;height:30px;display:flex;align-items:center;justify-content:center;border-radius:5px;padding:0 1rem}.searchInput{width:100%;max-width:300px;height:100%;padding:0 1rem;margin-right:5px;font-family:inherit;font-size:1.2rem;border:none;background-color:#ffffff1a;border-radius:5px;color:#fdfffc}.searchInput::placeholder{color:#fff;opacity:.5;font-family:inherit}.searchInput:focus{outline:1px solid #5398be}.searchButton{background-color:#ffffff1a;height:100%;width:70px;border-radius:5px;font-family:inherit;font-size:16px;color:#fdfffc}.searchButton:hover{background-color:#fff3;cursor:pointer}.searchButton:active{background-color:#fff3}._character_1uffe_1{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;row-gap:5px;width:150px;margin:0 auto;padding:10px;font-size:.8rem;background-color:#637081;border-radius:5px;box-shadow:0 0 2px 2px #d6d6d67e;transition:all .3s ease-in-out}._character_1uffe_1:hover{background-color:#ffffffde;color:#637081;cursor:pointer;transition:all .3s ease-in-out}._character__name_1uffe_53{font-size:1rem;align-self:center}._character__image_1uffe_63{width:90%;margin:0 auto;border-radius:5px}.main{display:flex;margin:0 20px;justify-content:space-around;align-items:flex-start}.characters{width:100%;margin:20px auto;display:grid;column-gap:10px;row-gap:20px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:space-around}@media (max-width: 677px){.characters{display:flex;flex-direction:column;align-items:center}}.unfound-message{display:block;width:100%;text-align:center;margin-top:30px}.aside-container{width:50%;display:flex;align-items:center;flex-direction:column}.loader{position:relative;display:inline-block;width:30px;height:30px;margin:20px auto;background-color:#fdfffc;border-radius:50%;box-sizing:border-box;animation:rotation 1s linear infinite}.loader:after{content:"";position:absolute;left:50%;top:50%;box-sizing:border-box;width:50px;height:50px;border-radius:50%;border:3px solid transparent;border-bottom-color:#ff3d00;transform:translate(-50%,-50%)}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.details{display:flex;align-items:center;justify-content:space-around;width:100%;height:150px;margin:20px;padding:10px;font-size:.8rem;color:#000;background-color:#fff;border-radius:5px;box-shadow:0 0 2px 2px #d6d6d67e}.details__image{height:130px;margin:0;border-radius:5px}.details__info{display:flex;height:100%;flex-direction:column;align-items:flex-start;justify-content:space-around}.details__text{font-size:.8rem;text-decoration:underline;font-weight:600}.pageControl__container{display:flex;justify-content:center;flex-wrap:wrap;gap:5px;margin:15px 5% 0;width:90%;align-self:center}.pageControl__button{text-decoration:none;padding:0;margin:0;text-align:center;width:30px;background-color:#d6d6d67e;border-radius:5px;border:none;cursor:pointer;color:#fff;transition:all .3s ease-in-out}.pageControl__button:hover{background-color:#637081;transition:all .3s ease-in-out}.pageControl__button_active{background-color:#fff;color:#000}
