html {
    background-color: rgb(216, 216, 216);

    margin: 0;

    font-family: Arial, Helvetica, sans-serif;
}

html body {
    margin: 0;
}

html body header {
    background-color: white;

    display: flex;
    justify-content: space-between;
    align-items: center;

    height: 6vh;

}

html body header .lista {
    display: flex;
    gap: 2vw;

    margin-right: 4vw;

}

.lista a {
    font-size: 1vw;

    width: 5vw;
    height: 3vh;

    display: flex;
    justify-content: center;
    align-items: center;

    color: black;

    text-decoration: none;
}

.lista a:hover {
    background: cyan;
    color: white;
}

.logo {
    width: 3vw;
}

.engre {
    width: 5vw
}

html body main {
    display: grid;
    justify-content: center;
    justify-items: center;

    margin-top: 2vh;   
    
    margin-bottom: 20vh
}

html body main section {
    display: flex;
    justify-content: center;
    align-items: center;

    margin: 3vw;

    gap: 2vw
}

html body main section div {
    background: white;

    border-radius: 10%;
} 

.d0, .d3 {
    width: 56vw;
    height: 30vh;
}

.d1, .d2 {
    width: 36vw;
    height: 30vh;
}

footer {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
}

@media (max-width: 700px) {
    html body header {
        /*padding-top: 2vh;*/
        
        height: 10vh
    }

    .lista {
        gap: 3vw;
    }

    .lista a {
        font-size: 3vw;

        width: 20vw;
        height: 3vh;

    }

    .logo {
        width: 20vw;
    }

    footer {
        font-size: 2vw;
    }

}