@charset "UTF-8";

*{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 text-decoration: none;
}


:root{
    --rosa01: #FFD9DA;
    --rosa02: #D895B1;
    --rosa03: #AC274F;
    --cinza1: #382E31;
    --cinza2: #191516;
    --font-poppins: "Poppins", sans-serif;
    --font-logo: "DM Serif Text", serif;
}

/*
    --rosa01: #E6BED2;
    --rosa02: #D895B1;
    --rosa03: #BF7896;
    --rosa04: #9B5372;
    --cinza: rgb(39, 35, 39);
*/

body{
    font-family: var(--font-poppins);
    background-color: var(--cinza2);
}

/*Header*/

div#header{
    display: grid;
    grid-template-areas: "header nav";
    align-items: center;
    justify-content: space-between;
    background-color: var(--cinza1);
    border-bottom: 1px solid rgb(48, 44, 44);
    box-shadow: 0 1px 5px black;
}

header{
    grid-area: header;
}

header > h1{
    font-family: var(--font-logo);
    padding: 20px;
    color: var(--rosa03);
}

nav{
    grid-area: nav;
    position: relative;
    padding: 20px;
    color: var(--rosa03);
}

nav > a{
    padding: 6px 10px;
    color: var(--rosa03);
}

nav > a:hover{
    border-radius: 3px;
    color: var(--cinza1);
    background-color: var(--rosa03);
}

span#nav-simbol{
    display: none;
    margin-right: 10px;
    padding: 10px;
    color: var(--rosa03);
}

@media (max-width: 500px) {
    nav > a{
        display: none;

    }

    span#nav-simbol{
        display: block;
    }

}


/*Main*/

main{
    margin: auto;
    max-width: 800px;
    text-align: center;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: var(--cinza1);
    color: var(--rosa03);
}

main > h1{
    margin: 0 10px;
    padding: 15px;
}

a.link{
    color: var(--cinza1);
    padding: 5px;

}

a.link:hover{
    color: var(--rosa02);
    background-color: var(--cinza1);
    border-radius: 5px;
}


div#exercicios{
    display: grid;
    grid-template-areas: 
        "vogal media salario maior" 
        "par auxiliar estudos . ";
}

div.link-area{
    display: grid;
    margin: 10px;
    max-width: 250px;
    padding: 5px;
    background-color: var(--rosa02);
    border-radius: 10px;
}

div#vogal-consoante{
    grid-area: vogal;
}

div#reajuste-salario{
    grid-area: salario;
}

div#media{
    grid-area: media;
}

div#maior-menor{
    grid-area: maior;
}

div#par-impar{
    grid-area: par;
}

div#variavel-auxiliar{
    grid-area: auxiliar;
}

div#turno-estudos{
    grid-area: estudos;
}