:root{--bg-color:#050505;--text-and-boxshadows:#ffe81f;--card-background:#1a1a1a;--button:#bfae15;--footer-text:#998b12;--main-text:#ccc}html,body{background-color:var(--bg-color);box-sizing:border-box;margin:0}nav{justify-content:space-around;align-items:center;padding:15px 20px;display:flex}nav a{color:var(--text-and-boxshadows);font-size:larger;font-weight:700;text-decoration:none}nav a:hover{transition:all .2s;transform:scale(1.03)}.home-container{color:var(--text-and-boxshadows);text-align:center;flex-direction:column;justify-content:center;align-items:center;margin:40px auto;display:flex}.home-subtitle{color:var(--main-text);max-width:90%;font-size:larger}.enter-button{color:var(--card-background);border-radius:16px;margin:20px 0;padding:10px;font-size:1.1rem}.enter-button:link{background-color:var(--button);text-decoration:none}.enter-button:hover{background-color:var(--text-and-boxshadows);transition:all .2s;transform:scale(1.03)}.body-wrapper{color:var(--text-and-boxshadows)}h1{text-align:center}h2{margin:5px 0}.character-grid{grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:30px;padding:10px;display:grid}.character-card{border:1px solid var(--text-and-boxshadows);text-align:center;border-radius:8px}.character-card img{object-fit:cover;max-width:100%;height:500px;margin:20px 0}.character-card:hover{transition:all .2s;transform:scale(1.03)}.value{margin-left:6px;font-weight:400}.buttons{justify-content:space-around;align-items:center;margin-bottom:15px;display:flex}.buttons button{background-color:var(--button);border:none;border-radius:12px;width:160px;height:40px;font-size:large;font-weight:700}button:hover{background-color:var(--text-and-boxshadows);cursor:pointer;transition:all .2s;transform:scale(1.03)}button.active{background-color:var(--text-and-boxshadows)}@media (width<=768px){.buttons{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));place-items:center;row-gap:14px;display:grid}}.footer{text-align:center;color:var(--footer-text);margin-top:auto;padding:10px}p{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin:0;display:flex}.footer a{color:var(--footer-text);align-items:center;gap:6px;text-decoration:none;display:inline-flex}.footer a:hover{color:var(--text-and-boxshadows);transition:all .2s;transform:scale(1.03)}.logo-title{color:var(--text-and-boxshadows);text-align:center;padding:20px}.app-body{flex-direction:column;min-height:100vh;display:flex}#root{max-width:95%;margin:0 auto}