*{margin:0;padding:0;box-sizing:border-box;font-family:Verdana,Arial,sans-serif}body,html{height:100%;overflow:hidden}.main-container{height:100vh}.animal-selection{width:100%;max-width:1400px;margin:0 auto;padding:.4rem 5% 3rem;box-sizing:border-box;height:100%;max-height:80vh;overflow-y:auto}.animal-selection::-webkit-scrollbar{width:8px}.animal-selection::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.animal-selection::-webkit-scrollbar-thumb{background:#888;border-radius:10px}.animal-selection::-webkit-scrollbar-thumb:hover{background:#555}.animal-selection ul{display:grid;gap:30px;list-style:none;padding:0;margin:0;grid-template-columns:repeat(4,1fr)}.animal-selection li{display:flex;justify-content:center}@media (max-width: 1200px){.animal-selection ul{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.animal-selection ul{grid-template-columns:1fr}.animal-selection{max-height:85vh}}.animal-card{display:flex;flex-direction:column;width:100%;height:350px;border-radius:12px;cursor:pointer;padding:2px;transition:transform .2s,box-shadow .2s,border .2s;border:1px solid rgb(50,50,50)}.animal-card:hover{transform:translateY(-5px);box-shadow:0 10px 20px #64646499;border:3px solid rgb(50,50,50)}.image-container{width:100%;height:80%;overflow:hidden}.animal-image{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s;border-radius:12px;background-color:#fff}.animal-name h2{margin:0;font-size:3rem;color:#333;text-align:center;font-weight:600}.animal-card.selected-animal{box-shadow:0 10px 20px #323232fc;border:3px solid rgb(50,50,50)}@media (max-width: 1200px){.animal-card{height:320px}.animal-name h2{font-size:2.2rem}}@media (max-width: 992px){.animal-card{height:280px}.animal-name h2{font-size:1.8rem}}@media (max-width: 768px){.animal-card{height:250px}.animal-name h2{font-size:1.5rem}}@media (max-width: 576px){.animal-card{height:220px}.animal-name h2{font-size:1.5rem}}@media (max-width: 400px){.animal-card{height:200px}.animal-name h2{font-size:1.3rem}.animal-card:hover{transform:translateY(-3px);box-shadow:0 10px 20px #64646499}}.keyboard{position:fixed;bottom:0;left:0;width:100%;background-color:#222;padding:.2rem .5rem;z-index:100;box-sizing:border-box;overflow:hidden}.keyboard ul{display:flex;justify-content:center;align-items:center;height:100%;list-style:none;padding:0;margin:1.4rem;gap:8px}.key{height:12rem;width:6rem;border:2px solid #000;border-radius:0 0 8px 8px;cursor:pointer;transition:all .2s ease;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:end;padding-bottom:10px;font-weight:700;color:#030303;box-shadow:0 4px 6px #0000001a}.key h3{font-size:3rem}.key span{font-size:1.5rem}.key.do{background-color:#ff8a80}.key.re{background-color:#ffab80}.key.mi{background-color:#ffcc80}.key.fa{background-color:#ffecb3}.key.sol{background-color:#ccff90}.key.la{background-color:#80d8ff}.key.si{background-color:#b388ff}.key.active{transform:scale(1.3) translateY(-5px);box-shadow:0 8px 15px #0000004d;filter:brightness(.5);border-width:3px;font-weight:900;color:#000000e6}.key:hover:not(.active){transform:translateY(-2px);box-shadow:0 6px 10px #0003}.key:active{transform:scale(1.05) translateY(-3px);filter:brightness(.2)}@media (max-width: 768px){.keyboard{padding:.15rem .3rem}.key{height:8rem;width:4rem;gap:6px}.key h3{font-size:2.5rem}.key span{font-size:1rem}.keyboard ul{margin:.4rem}}@media (max-width: 576px){.keyboard{padding:.2rem 0rem}.key{font-size:1.2rem;width:2.5rem}.key h3{font-size:1.5rem}.key span{font-size:1rem}.keyboard ul{gap:2px;margin:.2rem}}.header-container{display:flex;align-items:center;justify-content:space-between;padding:.65rem 1.5rem}.header-container h1{font-size:8rem;margin:0;transition:font-size .3s ease}.header-spacer{width:2.5rem}.button-container{display:flex;justify-content:flex-end}.reconnect-button{width:3rem;height:3rem;margin-bottom:3rem;border-radius:9999px;display:flex;align-items:center;justify-content:center;background-color:silver;border:none;cursor:pointer;transition:all .3s ease}.reconnect-button:hover{background-color:#e5e7eb}@media (max-width: 1200px){.header-container h1{font-size:6rem}.reconnect-button{width:2.75rem;height:2.75rem;margin-bottom:2.5rem}}@media (max-width: 992px){.header-container{padding:.5rem 1.25rem}.header-container h1{font-size:5rem}.header-spacer{width:2rem}.reconnect-button{width:2.5rem;height:2.5rem;margin-bottom:2rem}}@media (max-width: 768px){.header-container{padding:.4rem 1rem}.header-container h1{font-size:3.5rem}.header-spacer{width:1.5rem}.reconnect-button{width:2.25rem;height:2.25rem;margin-bottom:1.5rem}}@media (max-width: 576px){.header-container{padding:.3rem .75rem}.header-container h1{font-size:2.5rem}.header-spacer{width:1rem}.reconnect-button{width:2rem;height:2rem;margin-bottom:1rem}}@media (max-width: 400px){.header-container{padding:.25rem .5rem}.header-container h1{font-size:2rem}.header-spacer{width:.75rem}.reconnect-button{width:1.75rem;height:1.75rem;margin-bottom:.75rem}}