html
{
    width:100%;
}

:root
{
    --text: 240, 72, 145;
    --background: 51, 39, 121;
    --primary: 138, 74, 182;
    --secondary: 2, 26, 104;
    --accent: 86, 74, 156;

}

*
{
    font-size: 1.5vw;
    font-family: Google Sans Flex;
    color: rgba(var(--text));
}

body
{
    display: grid;
    background-color: rgba(var(--background));
}

.nav
{
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    text-align: center;
    background-color: rgba(var(--primary));
}

.nav div
{
    border: 2px solid rgba(var(--accent));
    display: flex;
    place-items: center;
    justify-content: center;
    align-items: center;
}

.my-button
{
    text-decoration: none;
}

.main_body
{
    display:grid;
    padding:2%;
    padding-top: 0%;
    place-content: center;
    text-align: center;
}

.main_body div
{
    border: 2px solid rgba(var(--accent));
    text-wrap: pretty;
}

.title
{
    text-align: center;
    padding: 5%;
    place-self: center;
}

h1
{
    font-size: 4vw;
}

h2{
    font-size: 2vw;
}

@media only screen and (max-width: 780px)
{
    .nav
    {
        grid-template-columns: repeat(4, 1fr);
    }

    *
    {
        font-size: 2vh;
    }

}