/*
===============================================================================================================
CSS Geral
===============================================================================================================
*/
:root{
    --cor_primaria: #00d9f8;
    --cor_secundaria: #1da3b8;
    --Backgroud: #dfdfdf;
    --CP_darkmode: #213872;
    --CS_darkmode: #0e2555;
    --BKG_darkmode: #303030;
    --transparente: rgba(0, 217, 248, 0.3);
    --transparent_dk: rgba(33, 56, 114, 0.3);

    --Border_radius: 45px;
    --box-shadow: 7px 7px 9px 0px rgba(0, 0, 0, 0.3);
    --borda: 1px #00d9f8 solid;
    --borda-dk: 1px #213872 solid;
    
}

h1{
    margin-top: 6%;
    font-size: 250%;
    margin-bottom: 8%;
}

h2{
    font-size: 200%;
}

/*
===============================================================================================================
Navegação entre dietas
===============================================================================================================
*/
#navD{
    display: flex;
    justify-content: center;
    gap: 4%;
}
.navD-link{
    color: var(--cor_secundaria);
    text-decoration: none;
    font-weight: bolder;
    font-size: 18px;
    transition: 0.3s;
    margin-bottom: 10%;
}
.navD-link:hover{
    color: var(--CS_darkmode);
}
.topo{
    color: var(--cor_primaria);
    text-decoration: none;
    display: block;
    margin: 2% auto;
    font-size: 150%;
    text-align: center;
    font-weight: bolder;
    transition: 0.3s;
}
.topo:hover{
    color: var(--CS_darkmode);
}
.ler{
    font-size: 140%;
    color: var(--cor_primaria);
    font-weight: bolder;
    transition: 0.3s;
    cursor: pointer;
}
.ler:hover{
    color: var(--CP_darkmode);
}
/*
===============================================================================================================
Estilização da sessão de refeição
===============================================================================================================
*/
.container-refecao{
    display: flex;
    gap: 3%;
    padding-inline: 1%;
}
.refeicao{
    width: 40%;
    border: 1px solid var(--cor_primaria);
    border-radius: 15px;
    display: block;
    margin: auto;
    margin-top: 3%;
    margin-bottom: 4%;
    align-self: flex-start;
}
.refeicao p{
    margin-right: -30px;
    margin: 2%;
    font-size: 130%;
}
.refeicao li{
    color: var(--CP_darkmode);
    margin-bottom: 2%;
    font-size: 140%;
}
/*
===============================================================================================================
Dieta para perder peso
===============================================================================================================
*/
.intro-perder-peso{
    display: flex;
    justify-content: space-between;
    padding-inline: 1%;
    margin-bottom: 5%;

}
.intro-perder-peso img{
    border-radius: 16px;
    width: 20%;
}
.texto-intro-perder-peso{
    max-width: 75%;
}
.intro-perder-peso h3{
    font-size: 150%;
}
.intro-perder-peso p{
    font-size: 140%;
    margin: 2%;
}


/*
===============================================================================================================
Dieta para ganhar massa
===============================================================================================================
*/
.intro-ganhar-massa{
    display: flex;
    padding-inline: 1%;
    justify-content: space-between;
    margin-block: 8%
    
}
.intro-ganhar-massa img{
    width: 30%;
    border-radius: 15px;
}
.intro-ganhar-massa h3{
    margin-top: 0;
    margin-bottom: 1%;
    font-size: 160%;
}
.intro-ganhar-massa p{
    width: 96%;
    display: block;
    margin: 1% auto;
    font-size: 125%;
    margin-bottom: 3%;
}

/*
===============================================================================================================
Dieta para veganos
===============================================================================================================
*/
#vegana{
    margin-top: 6%;
}
.intro-vegana{
    display: flex;
    justify-content: space-between;
    padding-inline: 1%;
    margin-block: 5%;

}
.intro-vegana img{
    width: 30%;
    border-radius: 15px;
}
.intro-vegana h3{
    font-size: 155%;
}
.intro-vegana p{
    font-size: 135%;
    width: 96%;
    margin-bottom: 2%;
}

/*
===============================================================================================================
Dieta zero glúten
===============================================================================================================
*/
.intro-gluten{
    display: flex;
    justify-content: space-between;
    margin-block: 5%;
    padding-inline: 1%;
}
.intro-gluten img{
    height: 68vh;
    border-radius: 15px;
}
.intro-gluten h3{
    font-size: 165%;
}
.intro-gluten p{
    font-size: 135%;
    width:96%;
    display: block;
    margin: auto;
    margin-bottom: 2%;
}

/*
===============================================================================================================
Modo noturno
===============================================================================================================
*/
body.darkmode .navD-link{
    color: var(--cor_primaria);
}
body.darkmode .navD-link:hover{
    color: var(--CP_darkmode);
}
body.darkmode .intro-perder-peso{
    border-color: var(--CP_darkmode);
}
body.darkmode .refeicao{
    border-color: var(--CP_darkmode);
}
body.darkmode .refeicao li{
    color: var(--cor_primaria);
}

/*
===============================================================================================================
Responsividade
===============================================================================================================
*/
@media(max-width:900px){
    .intro-perder-peso img{
        height: 40%;
        margin-top: 7%;
    }
    .texto-intro-perder-peso p{
        font-size: 125%;
    }
    .intro-ganhar-massa img{
        width: 32%;
    }
    .intro-ganhar-massa p{
        font-size: 125%;
    }
    .intro-vegana p{
        font-size: 125%;
    }
    .intro-gluten img{
        height: 88vh;
    }
    .intro-gluten p{
        font-size: 128%;
    }
}
@media(max-width: 768px){
    #navD{
        gap: 7%;
    }
    .container-refecao{
        gap: 1%;
        padding-inline: 0.5%;
    }
    .intro-perder-peso img, .intro-ganhar-massa img, .intro-vegana img, .intro-gluten img{
        display: none;
    }
    .texto-intro-perder-peso{
        display: block;
        margin: auto;
        width: 90%;
        max-width: 90%;
    }
    .intro-perder-peso, .intro-ganhar-massa, .intro-vegana, .intro-gluten{
        background-color: var(--transparente);
    }
    .intro-ganhar-massa p, .intro-vegana p, .intro-gluten p{
        max-width: 90%;
    }
    body.darkmode .intro-perder-peso, body.darkmode .intro-ganhar-massa, body.darkmode .intro-vegana, body.darkmode .intro-gluten{
        background-color: var(--transparent_dk);
        padding-block: 1%;
    }
    .intro-vegana{
    display: flex;
    flex-direction: column;
    padding-inline: 1%;
    }
    .intro-vegana p{
        max-width: 90%;
        width: auto;        
        margin: 0 auto;       
    }
}
@media(max-width:480px){
    .intro-perder-peso{
        max-width: 100%;
        width: 100%;
    }
    .container-refecao{
        flex-direction: column;
    }
    .refeicao{
        width: 95%;
        display: block;
        margin: 0 auto;
        margin-bottom: 5%;
    }
    #navD{
        gap: 1.7%
    }
    .navD-link{
        font-size: 100%;
    }
}
@media(max-width:420px){
    #navD{
        flex-direction: column;
        justify-content: center;
    }
    .navD-link{
        display: block;
        margin: auto;
        margin-bottom: 9%;
        text-align: center;
    }
    h2{
        max-width: 90%;
        font-size: 150%;
        display: block;
        margin: auto;
        margin-bottom: 6%;
    }
}
@media(max-width:320px){
    h1{
        max-width: 90%;
        font-size: 180%;
        display: block;
        margin: auto;
        margin-bottom: 12%;
        margin-top: 5%;
    }
}