.character{background-color:var(--background-card);border-radius:20px;box-shadow:0 0 10px 1px var(--background-body);overflow:hidden;cursor:pointer;transition:transform .2s ease-in-out;height:100%}.character:hover{transform:scale(1.05)}.character:hover h3{color:var(--text-orange)}.character span{color:var(--text-gray)}.character h3{margin-bottom:.5rem}.character__info{padding:1.5rem}.character__info .status{display:flex;align-items:center;margin-bottom:.5rem}.character__info .status span{color:var(--text-gray)}.character__info .status span:first-child{width:10px;height:10px;border-radius:50%;margin-right:.5rem}.character__info .status .alive{background-color:green}.character__info .status .dead{background-color:red}.character__info .status .default{background-color:#fff}.character__info .status .origin{margin-bottom:.5rem}.characters{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem;margin:3rem 0}.filter{width:400px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);border-radius:10px;overflow:hidden}.filter .item{padding:1rem .5rem;background-color:var(--background-card);text-align:center;cursor:pointer}.filter .item:hover{color:var(--text-orange)}.btn-container{display:flex;justify-content:right}.btn-next,.btn-prev{border-radius:4px;width:100px;height:40px;font-family:monospace;color:#000;font-size:15px;background:#7fffd4;border-color:azure;margin-left:20px}@media (min-width:300px){.btn-next,.btn-prev{justify-items:center;margin-top:20px;background:violet}}@media (min-width:1200px){.btn-next,.btn-prev{justify-items:center;margin-top:20px;background:aqua}}.search{width:400px;margin:3rem auto 0}.search input{height:53px;width:400px;border:none;border-radius:10px;padding:0 .5rem}.footer{background-color:var(--color-black);text-align:center;padding:5rem 0;color:var(--color-purple);margin-top:100px}a,span{color:aqua}:root{--background-body:#24282f;--background-card:#3c3e44;--text-white:#fff;--text-gray:silver;--text-orange:#ff9800}*{box-sizing:border-box;margin:0;padding:0}body{background:url(/d929d8bc8d91c27e.JPG);color:var(--text-white);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}h1{margin-bottom:3rem;text-align:center;color:aqua}.container{width:980px;max-width:90%;margin:5rem auto}img{width:100%}