/*Body - Controle do corpo do site*/
body{
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    background-color: #0f172A;
    padding:60px 5vw;
            animation: fadeIn 1s ease-in;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* Main - controle do tronco do site (Excluindo o cabeçalho e rodapé)*/
main{
     display: flex;
    justify-content: center;
}

/*Definição do estilo geral das caixas (div) em geral*/
.box{
    padding: 1px 20px 20px 20px;
    background-color: #1E293B;
    border-radius: 20px;
    box-shadow: rgb(0, 0, 0) 5px 2px 20px;
}

/*Definação do posicionamento das caixas em relação as outras e as outras partes*/
.box2{
    display: flex;
    flex-direction: column;
    align-content: space-between;
    padding: 10px;
    gap: 20px
}

/*Definição do estilo do fornulário de dúvidas*/
form input, textarea{
    background-color: #0f172A;
    border-radius: 10px;
    border: none;
}    

/*Definção do estilo dos botões de envio (do formulário e página de cadastros*/
.enviar-button{
    background-color: #22D3EE;
    padding: 10px;
    border:none;
    border-radius: 10px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    /*Definção do estilo dos botões de envio (do formulário e página de cadastros*/
}

/*Definição do estilo do cabeçalho*/
header{
    text-align: center;
    margin:17px 67px 0 67px;
    
}

/*Definição da posição da barra de navegação*/
nav{
    position:sticky;
    top: 37px;
    z-index: 1000;
    display: flex;
    justify-content: center;
    margin-top:30px;
    
} 

/*Definição do estilo da barra de navegação do site*/
nav div{
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 67px;
    background-color: #1E293B;
    border: 4px solid #22D3EE;
    border-radius: 15px;
    padding: 10px 20px;
    width: auto;
 
}

/*Definição dos links da barra de navegação*/
nav a{
    display: inline-flex;
    align-items: center;
    text-align: center;
    border-radius: 10px;
    padding: 15px;
    transition: 0.3s;
}

/*Definição do estilo dos links da barra de navegação*/
nav a:hover{
    color: black;
    background-color: #22D3EE;
}

/*Definição do estilo dos paragrafos*/
p{color: #E2E8F0;
    padding-left: 10px;
}

ul{color: #E2E8F0;} /*Definição do estilo das listas*/

label{color: #E2E8F0;} /*Definção do estilos das legendas do formulário*/

/*Definição do estilo dos títulos grandes*/
h1{
    font-size: 67px;
    margin: 0px;
    color: #22D3EE;
}

/*Definição do estilo dos títulos médios*/
h2{
    text-align: center;
    font-size: 35px;
    color: #22D3EE;
}

/*Definição do estilo dos sub-títulos*/
h3{
    color: white;
    font-size: 30px;
    margin-bottom: 0;
}

/*Definição do estilo do rodapé*/
footer{
    display: flex;
    margin-top: 30px;
    margin-bottom: 0;
    justify-content: center;
    flex-direction: column;
}
footer div{
    display: flex;
    justify-content: center;
}

/*Definição do estilo dos links*/
a{
    color:blanchedalmond;
    text-decoration: none;
}

/*Definição do estilo das escritas em negrito*/
b{
    color:#b8bdc3
}

/*IDs para objetos específicos*/


#name{
    margin-top: 25px;
}

/*Definição do estilo das fotos*/
#foto{
    width: 150px;
    margin-top: 10px;
    border: 10px solid #22D3EE;
    border-radius: 5px;
    
}

/*Definição do estilo de outras imagens*/
#imgs{
    padding: 40px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}
#imgs-1{
    margin-bottom: 40px;
}
#imgs-2{
    margin-top: 40px;
    margin-left: -20px;
}

/*Definição do estilo dos formulários de cadastro e login*/
form{
    display: flex;
    justify-content: center;
    gap: 10px;
}
#login form{
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 350px;
    margin: 20px auto;
}

#login form div{
    width: 300px;
    margin: 0 auto;
}
#login input{
    color: azure;
    width: 300px;
    border-radius: 5px;
    padding: 3px;
    letter-spacing: 1px;
}

/*Definição dos estilos das caixas sobre as matérias*/
.matbox{
    row-gap: 20px;
    column-gap: 40px;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    justify-content: center;
}
.matbox2{
    min-width: 250px;
    flex: 0 0 calc(25% - 10px); 
    padding: 1px 20px 20px 20px;
    background-color: #1E293B;
    border-radius: 20px;
    box-shadow: rgb(0, 0, 0) 5px 2px 20px;
    align-content: space-between;
    text-align: center;
}