.body
{
    display:grid;
    grid-template-areas: 
        "nav nav" 
        "content content"
        "footer footer";
    padding: 10vw;
    grid-template-columns: auto auto;
    gap: 3vw;
    padding: 5vw;
}

.body div
{
    background-color: white;
    padding: 10px;
}


.body div.nav
{
    display: grid;
    grid-area: nav;
    grid-template-columns: 11.1% 11.1% 11.1% 11.1% 11.1% 11.1% 11.1% 11.1% 11.1%;
}

.nav div
{
    background-color: #f1f1f1;
    border: 1px solid black;
    padding: 10px;
    font-size: 30px;
}

.body div.main-body {
    display:grid; 
    grid-area: content;
    grid-template-columns: 33% 33% 33%;
}

.main-body div
{
    background-color: #f1f1f1;
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    padding: 10px;
    font-size: 30px;
}

.my-button
{
  text-decoration: none; 
  display: inline-block; 
  cursor: pointer;
}

.middle-column
{
    text-align: center;
}

.body div.footer
{
    display: grid;
    grid-area: footer;
    grid-template-columns: auto;
}

.footer div
{
    background-color: #f1f1f1;
    border: 1px solid black;
    padding: 10px;
    font-size: 30px;
    text-align: center;
    font-family:Arial;
}