@import "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap";:root{--cor-standard:#fffcf2;--cor-destaque:#3d348b;--cor-destaque-transparente:#3d348b36;--texto-standard:#252422;--texto-secundario:#fffcf2;--sombra:#0000003f}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0;transition:background-color .8s,color .8s}body{background-color:var(--cor-standard);min-width:100%;color:var(--texto-standard);margin-bottom:80px;font-family:Roboto,sans-serif}header{background-color:var(--cor-primaria-escura);color:var(--texto-standard);text-align:left;min-width:100%;padding:10px 10px 1.5rem;box-shadow:3px 3px 10px #0000003f}#theme{background-color:var(--cor-secundaria-escura);border-radius:50%;justify-content:center;width:50px;height:50px;display:flex;position:absolute;top:10px;right:10px}.theme-button{background:var(--cor-destaque);cursor:pointer;border:none;border-radius:50%;align-self:center;width:40px;height:40px;transform:scale(.95)}.theme-button>svg{width:20px;height:20px}.theme-button:active,.theme-button>svg:active{transition:all .5s cubic-bezier(.175,.885,.32,1.275);transform:scale(.9)}.logo{background-color:none;min-width:5%;max-width:60px;height:auto;margin-bottom:10px;display:block}header h1{font-size:clamp(1.5rem, 4rem);margin-bottom:5px}header p{color:var(--texto-standard);text-align:center;margin-bottom:1rem;font-size:1rem}hgroup{justify-content:center;align-items:center;gap:1rem;margin:auto;display:flex}nav{background-color:var(--cor-destaque-transparente);scrollbar-width:none;max-width:95vw;box-shadow:1px 1px 1px var(--sombra);border-radius:20px;justify-content:start;margin:auto;padding:10px;display:flex;overflow-x:auto}nav button{background-color:var(--cor-standard);color:var(--texto-standard);cursor:pointer;border:none;border-radius:16px;margin-right:10px;padding:10px 15px}h3,span,button{font-size:clamp(.8rem,1.5vh,1.2rem)}.active{background-color:var(--cor-destaque);color:var(--texto-secundario);box-shadow:inset 0 0 3px var(--sombra);font-weight:400;transition:all .3s;transform:scale(1.01)}.ativo:hover{box-shadow:inset 0 0 3px var(--sombra);transition:all .5s;transform:scale(1.02)}#grade-sons{flex-direction:column;gap:5px;max-width:95vw;margin:10px auto auto;display:flex}.card{text-align:left;background-color:var(--cor-destaque-transparente);color:var(--texto-standard);box-shadow:1px 1px 1px var(--sombra);border-radius:10px;flex-direction:row;justify-content:start;align-items:center;gap:1rem;padding:5px;font-size:.9rem;display:flex}.card-ativo{background-color:var(--cor-destaque);color:var(--texto-secundario);transition:all .3s;transform:scale(1.01)}.card:hover{box-shadow:inset 0 0 3px var(--sombra);transition:all .3s;transform:scale(1.01)}.info{flex-grow:1}.card img{object-fit:cover;border-radius:10px;flex-shrink:0;min-width:70px;max-width:70px}footer{background-color:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fffefe;text-align:left;z-index:1000;white-space:nowrap;flex-direction:row;justify-content:center;place-items:center;gap:10px;width:fit-content;max-width:90vw;padding:6px 8px;transition:all .5s cubic-bezier(.175,.885,.32,1.275);display:flex;position:fixed;bottom:0;left:50%;overflow:hidden;transform:translate(-50%)translateY(0)}footer .footer-content{background-color:var(--cor-destaque);border-radius:50px;justify-content:center;align-items:center;gap:10px;margin-bottom:10px;padding:6px 8px;display:flex;box-shadow:3px 5px 10px #0000003f}footer p{background-color:var(--cor-destaque-transparente);text-wrap:nowrap;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:50px;justify-content:center;padding:15px;font-weight:400}audio{display:none}.play-button{background-color:var(--cor-destaque);cursor:pointer;background-size:cover;border:none;border-radius:50%;width:50px;height:50px}.play-button:active{transition:all .5s cubic-bezier(.175,.885,.32,1.275);transform:scale(.9)}.oculto{transform:translate(-50%)translateY(150%)}@media screen and (width>=600px){header h1{font-size:4rem}#grade-sons{grid-template-columns:repeat(2,1fr);gap:10px;max-width:85vw;display:grid}header p{font-size:1.5rem}.card img{max-width:100px}.card{font-size:clamp(.4rem,2vw,1.2rem)}}@media screen and (width>=900px){nav{max-width:80vw}#grade-sons{grid-template-columns:repeat(3,1fr);gap:10px;max-width:85vw;display:grid}.card img{max-width:100px;font-size:clamp(.4rem, 1vh)}}body.dark{--cor-standard:#252422;--cor-destaque:#3d348b;--cor-destaque-transparente:#3d348b36;--texto-standard:#fffcf2;--texto-secundario:#fffcf2;--sombra:#f8f6f62d}