@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Open Sans',sans-serif;
}

body{
    display:flex;
    flex-direction:column;
    min-height:100vh;
    background:#ebf1f3;
}

footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    background-color: rgb(234, 232, 241);
    font-family: sans-serif;
    font-size: 0.8em;
    color:rgb(173, 169, 169);
    border-radius: 5px;
    margin: 5px;    
    width: 100%;
    height: 60px;
    box-shadow: 8px 8px 12px hsla(0, 2%, 10%, 0.667);
    padding: 10px;
}




main{
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1; /* Faz o conteúdo ocupar o espaço restante */
    width:100%; /* modificado: adapta o conteúdo ao dispositivo */
    padding:0 10px;
}





/* TITULOS */

h2{
    width:100%;
    margin-top:5px;
    padding:10px;
    font-size:1.2rem; 
    color:#2e2c2c;
    text-align:center;
    border-radius:5px;
    background:white;
    box-shadow:2px 4px 8px rgba(0,0,0,0.2);
}

/* MENU */



#menu-h{
    background:hwb(202 72% 5% / 0.714);
    display:flex;
    width:100%;
    padding:10px;
    box-shadow:2px 4px 8px rgba(0,0,0,0.2);
    flex-wrap:wrap;
}

#menu-h ul{
    max-width:900px;
    margin:auto;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    list-style:none;
}

#menu-h ul li a{
    background:rgb(41,146,231);
    padding:15px 20px;
    color:white;
    text-decoration:none;
    border-radius:5px;
    transition:.3s;
}

#menu-h ul li a:hover{
    background:white;
    color:rgb(41,146,231);
}

/* BOTÕES */

button{
    background:#2192FF;
    border:none;
    color:white;
    padding:10px 20px;
    font-size:1rem;
    font-weight:bold;
    border-radius:10px;
    cursor:pointer;
    transition:.3s;
    align-items: center;
}


button:hover{
    background:white;
    color:#1505f5;
    transform:scale(1.03);
}

/* INPUTS */

input, select{
    padding:8px;
    border-radius:5px;
    border:1px solid #ccc;
    margin-top:5px;
     width: 100%;
}

input:focus{
outline:none;
border:1px solid #2192FF;
box-shadow:0 0 4px rgba(33,146,255,0.4);
}




/* RESPONSIVO MENU */


@media (max-width:700px){

    #menu-h ul{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:8px;
        width:100%;
    }

    #menu-h ul li a{
        display:block;
        text-align:center;
        padding:10px;
    }

}

@media (max-width:500px){
    #menu-h ul{
        grid-template-columns:1fr;
    }

    #menu-h ul li a{
        padding:12px 10px;
    }

    h2{
        font-size:1rem; /* modificado: texto mais legível em telas pequenas */
    }
}