body{

font-family:Segoe UI, Arial;

background:#f2f4f8;

margin:0;

}



header{

background:#1e73be;

color:white;

padding:20px;

text-align:center;

position:relative;

}

header h1{

margin:0;

font-size:30px;
}





.btn-topo{

position:absolute;

left:20px;

top:20px;

background:white;

border:none;

padding:8px 14px;

border-radius:6px;

cursor:pointer;

font-weight:bold;

}



.container{

max-width:900px;

margin:auto;

padding:40px;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(160px,1fr));

gap:20px;

}



.card{
    font-size:26px;
padding:30px 20px;
border-radius:14px;

background:white;

text-align:center;

font-weight:bold;

cursor:pointer;

box-shadow:0 4px 10px rgba(0,0,0,0.08);

transition:all 0.25s;

}



.card:hover{

transform:translateY(-6px);

box-shadow:0 10px 25px rgba(0,0,0,0.15);

background:#1e73be;

color:white;

}



.oculto{

display:none;

}



#tituloAno{

grid-column:1/-1;

text-align:center;

margin-bottom:20px;

color:#333;

}



#voltarFlutuante{

position:fixed;

bottom:20px;

right:20px;

background:#1e73be;

color:white;

border:none;

padding:16px 22px;

border-radius:8px;

font-size:18px;

cursor:pointer;

box-shadow:0 4px 10px rgba(0,0,0,0.2);

}




#voltarFlutuante:hover{

background:#155a96;

}