.error-container{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center}.error-img{width:auto;height:400px}.character__status{padding:0 5px;border-radius:3px;font-size:.9em;font-weight:700}.character{position:relative;display:flex;flex-direction:column;align-items:center;width:200px;height:300px;border:2px solid #bfde42;border-radius:5px;background-color:#0c7d85;color:#fff;transition:.3s}.character:hover{cursor:pointer;box-shadow:0 0 8px 1px #bfde42}.character__img{width:200px;height:200px;border-top-right-radius:3px;border-top-left-radius:3px;margin-bottom:5px}.character__info{height:85px;width:180px;display:flex;flex-direction:column;justify-content:space-between;align-items:center}.character__name{max-height:2.3em;font-size:1.1em;line-height:1.1em;text-align:center}.character__species{font-size:.9em;opacity:.8;text-align:center}.character__location{gap:5px;font-size:.9em;line-height:1.2em;text-align:center}.character__status{position:absolute;top:.5em;right:.5em}.character__status_alive{background:#009d3d}.character__status_dead{background-color:#d22e2b}.character__status_unknown{background-color:#0089ff}.location-icon{width:auto;height:1em;margin-right:.4em}.loader-container{display:flex;align-items:center;justify-content:center;padding:2em;grid-area:results}.loader{width:200px;height:200px}.pagination{display:flex;align-items:center;gap:.5em;margin:2em auto}.pagination__btn{width:2em;height:2em;border-radius:50%;border:none;background:#f96e4d;font-family:Poppins,sans-serif;color:#fff;font-size:1em;font-weight:700;transition:.2s}.pagination__btn:not(:disabled):hover{cursor:pointer;background:#db5e3f}.pagination__btn:disabled{opacity:.7}.pagination__page-number{width:2em;height:2em;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#f96e4d;color:#fff;font-size:1.1em;font-weight:700}.not-found-container{display:flex;flex-direction:column;align-items:center;margin:2em}.not-found__img{width:300px;height:auto}.search-results{display:flex;flex-direction:column;align-items:center;grid-area:results}.search-results__list{max-width:1150px;display:flex;flex-wrap:wrap;row-gap:2em;column-gap:1.5em;justify-content:center;width:100%;list-style:none;grid-area:list}.search-bar{position:relative;display:flex;width:75%;gap:20px;margin:1em auto 0;grid-area:searchbar}.search-bar__input{box-sizing:border-box;width:100%;height:2em;margin-bottom:1em;padding:.1em 1em;border-radius:1.75em;border:none;outline:none;background-color:#407772;color:#fff;caret-color:#b3cac9;font-family:Poppins,sans-serif;font-size:1.5em;line-height:1.5em}.search-bar__input::placeholder{color:#b3cac9}.search-bar__button{position:absolute;top:.3em;right:.75em;width:3em;height:3em;background:url(/react-rss/assets/search-fe3eb916.svg);background-position:center;background-size:2em 2em;background-repeat:no-repeat;border:none;opacity:.6;transition:.3s}.search-bar__button:hover{cursor:pointer;opacity:.9}.error-btn{padding:.5em 1em;width:fit-content;font-family:Poppins,sans-serif;font-size:1em;font-weight:700;color:#fff;border:none;border-radius:1.25em;background-color:#f96e4d;transition:.3s}.error-btn{margin:0 auto 2em;grid-area:error-button}.error-btn:hover{cursor:pointer;background:#db5e3f}.per-page{height:fit-content;display:flex;gap:.5em;align-items:center;margin:5px auto;grid-area:per-page}.per-page__header{font-size:1.1em;font-weight:700}.per-page__number{width:2em;height:2em;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#407772;color:#fff;font-size:1em;font-weight:700;transition:.3s}.per-page__number:hover{cursor:pointer;background-color:#0c7d85}.per-page__number-input{display:none}.per-page__number-input:checked+.per-page__number{background:#f96e4d}.search-page{display:flex;flex-direction:column;align-items:center;width:100%}.logo{width:100%;height:100px;margin:.25em}.container{display:grid;grid-template-rows:88px 72px auto;grid-template-areas:"searchbar searchbar" "per-page error-button" "results results"}.container_details{grid-template-areas:"searchbar searchbar details" "per-page error-button details" "results results details"}.oops-button{padding:.5em 1em;width:fit-content;font-family:Poppins,sans-serif;font-size:1em;font-weight:700;color:#fff;border:none;border-radius:1.25em;background-color:#f96e4d;transition:.3s}.oops-container{width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}.oops-header{text-align:center}.oops-button{margin-top:2em;text-transform:uppercase;font-size:1.1em;font-weight:700}.oops-button:hover{cursor:pointer;background:#db5e3f}.oops-img-container{position:relative;display:flex;align-items:center;justify-content:space-between;height:350px;width:450px;font-size:250px;font-weight:700;line-height:250px}.oops-img{position:absolute;left:46px;width:auto;height:350px}.props{display:flex;margin-bottom:5px;gap:5px;text-align:center}.props__name{display:flex;align-items:center;justify-content:center;width:80px;padding:2px 5px;border-radius:3px;background:#0c7d85;text-transform:uppercase}.props__value{width:170px;padding:2px 5px;border-radius:3px;background:#407772}.details__header{margin-top:1em;margin-bottom:.5em;display:flex;align-items:center;gap:10px;text-transform:uppercase;opacity:.8}.details__header span{display:block;width:40px;border-bottom:2px solid #0c7d85}.details__status{padding:0 5px;border-radius:3px;font-size:.9em;font-weight:700}.details-btn{padding:.5em 1em;width:fit-content;font-family:Poppins,sans-serif;font-size:1em;font-weight:700;color:#fff;border:none;border-radius:1.25em;background-color:#f96e4d;transition:.3s}.details{width:280px;padding:10px;margin-top:160px;margin-left:2em;display:flex;flex-direction:column;align-self:flex-start;align-items:center;grid-area:details;border-radius:5px;font-size:.9em;background:#002833}.details__img{width:180px;height:180px;border-radius:50%;object-fit:cover;border:4px solid}.details__img_alive{border-color:#009d3d}.details__img_dead{border-color:#d22e2b}.details__img_unknown{border-color:#0089ff}.details__status{width:fit-content;margin-top:-13px}.details__status_alive{background:#009d3d}.details__status_dead{background-color:#d22e2b}.details__status_unknown{background-color:#0089ff}.details__name{margin:.5em auto;text-align:center}.details-btn{margin-top:1em}.details-btn:hover{cursor:pointer;background:#db5e3f}*{margin:0;padding:0}body{width:80vw;margin:0 auto;display:flex;justify-content:center;background-color:#043f47}#root{width:100%;display:flex;justify-content:center;font-family:Poppins,sans-serif;color:#fff}