:root{--brown: #272121;--dark-brown: #1b1616;--light-brown: #443737;--white: #ffffff}html{scroll-behavior:smooth}body{color:var(--white);background-color:var(--brown);margin:0;font-size:20px;font-family:Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.header-container{height:18rem;background-image:url(https://img.europapress.es/fotoweb/fotonoticia_20210620111333_1200.jpg);background-position:0;background-repeat:no-repeat;background-size:cover}.input-search{display:grid;grid-template-columns:65rem 6rem;justify-content:center;gap:.2rem}.seach-bar{text-align:center;padding:.5rem 1.2rem;color:var(--white);font-size:1rem;height:1.5rem;background-color:var(--light-brown);border:none}.search-button{cursor:pointer;color:var(--white);padding:.5rem 1rem;background-color:var(--brown);border:1px solid var(--white);font-size:1rem}.search-button:hover{opacity:.8}.search-button:active{color:#cacaca}.location-info{display:flex;flex-direction:column;align-items:center}.location-info ul{list-style:none;display:flex;gap:10rem}.residents{width:75rem;margin:auto}.all-residents{display:grid;grid-template-columns:repeat(2,2fr);gap:2rem 1rem}.character-info{height:13rem;list-style:none;display:flex;border-radius:1rem;background-color:var(--light-brown)}.character-info ul{list-style:none;display:flex;justify-content:center;flex-direction:column;gap:4px 0}.status-circle{width:1rem;height:1rem;display:inline-block;margin-right:.5rem;border-radius:50%}.footer{margin:4rem 0 0;border-top:1px solid white;padding:2rem;text-align:center}.search-options-container{list-style:none;position:absolute;margin-top:3px;left:-100px;right:0;margin-left:auto;margin-right:auto;padding:1rem;background-color:var(--dark-brown);display:flex;width:63rem;flex-direction:column}.each-search-option{padding:1rem}.each-search-option:hover{cursor:pointer;background-color:#443737;color:#0ff}.each-search-option:active{color:#07a3a3}.button-pages-container{list-style:none;display:flex;width:65rem;flex-wrap:wrap;justify-content:center;margin:4rem 3.5rem;gap:5rem 1rem}.button-pages-container li a{text-decoration:none;list-style:none;cursor:pointer;padding:1.4rem;border-radius:50%;background-color:var(--dark-brown);color:#0ff;font-size:1.3rem}.button-pages-container li a:hover{color:#000;background-color:#0ff}