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

body {
    /* Chopped the page into a 3 column* 4 rows */
    display: grid;
    grid-template-columns: 1fr 300px; /* Left side stretches, right side fixed */
    /* grid-template-rows: 1fr auto 1fr; */
    min-height: 80vh;
    gap: 20px;
    background-color: rgba(221, 216, 216, 0.829);
}

header {
    background-color: rgb(230, 190, 200);
    grid-column: 1/3; /* Spanning across the first two columns */
    height: 130px;
    display: flex;
    /* Make the logo sit next to nav bar */
    align-items: center;
}

#topleft {
    background-color: aqua;
    margin-left: 20px;
}

#topright {
    background: rgb(24, 232, 138);
    margin-right: 10px;
}

#main {
    background-color: chocolate;
    margin-left: 20px;
}

#buttomright {
    background: gold;
    margin-right: 10px;
}

footer {
    font-size: 35px;
    background-color: rgb(168, 172, 168);
    grid-column: 1/3; /* Spanning across the first two columns */
    height: 300px;
    grid-row: 3; /* Placing it in the third row */
}

a{
    font-size: 15px;
}

#leftContainer, #rightContainer{
    box-sizing: block;

}

#topleft, #topright{
    height: 170px;
    padding: 5px;
    font-size: 35px;
    font-family: Arial, Helvetica, sans-serif;
    border: 10px solid;
    border-color: white;
}
#main, #buttomright{
    height: 450px;
    padding: 5px;
    font-size: 35px;
    font-family: Arial, Helvetica, sans-serif;
    border: 10px solid;
    border-color: white;
}

#logo {
    text-align: left;
    font-size: 50px;
    margin-right: 10%;
    margin-left: 20px;
}

#nav {
    border: 6px solid;
    width: 100%;
    padding: 25px;
    border-color: red;
}

a.nav {
    font-size: larger;
    padding: 20px;
    border-radius: 20px;
    background-color: antiquewhite;
    margin: 10px;
}