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

ul, li {
    list-style: none;
    padding-top: 5px;
    font-size: 1rem;
}

a {
    text-decoration: none;
}

hr {
    border-color: black;
}

body {
    display: grid;
    min-height: 100vh;
    gap: 3px;
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "h h h"
                         "n m a"
                         "f f f";
}

header {
    grid-area: h;
    background: gray;
    text-align: center;
    color: white;
    text-transform: uppercase;
    font-size: 0.8rem;
}

nav {
    grid-area: n;
    background: pink;
    padding: 10px;
}

nav a {
    color: black;
}

main {
    grid-area:m;
    background: lightblue;
    padding-right: 40px;
    padding-left: 40px;
    padding-bottom: 50px;
    font-size: 1rem;
}

main h2 {
    font-size: 1.5rem;
    margin-top: 25px;
}

main h3 {
    font-size: 1.2rem;
    margin-top: 5px;
}

main p {
    font-size: 1rem;
}

aside {
    grid-area:a;
    background: lightgreen;
    padding: 10px;
}

footer {
    grid-area:f;
    background: gray;
    color: white;
    text-align: center;
    padding-top: 15px;
    font-size: 0.8rem;
}


@media (max-width: 750px){
    body {
        display: grid;
        min-height: 100vh;
        gap: 3px;
        grid-template-columns: 3fr 8fr;
        grid-template-rows: auto  1fr 1fr auto;
        grid-template-areas: "h h h"
                         "n m m"
                         "a m m"
                         "f f f";
    }
}

@media (max-width: 550px){
    body {
        display: grid;
        min-height: 100vh;
        gap: 3px;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto  1fr 4fr auto;
        grid-template-areas: "h h "
                         "n a"
                         "m m"
                         "f f ";
    }
}