@media screen and (max-width: 800px) {
    .header {
        width: 100%;
    }
    .header img {
        width: 90%;
        margin-left: 5%;
    }
    p {
        font-family: 'Roboto', sans-serif;
        font-size: 20px;
        text-align: center;
    }
    a {
        text-decoration: none;
        color: cadetblue;
    }
    a:hover {
        text-decoration: none;
        color: blue;
    }
    a:active {
        text-decoration: none;
        color: cadetblue;
    }
    a:visited {
        text-decoration: none;
        color: cadetblue;
    }
    .section {
        width: 85%;
        margin: 3% 7.5%;
        display: inline-block;
        border-radius: 20px;
        background-color: #9fc5c6;
        vertical-align: top;
    }
    .section:hover {
        background-color: cadetblue;
    }
    h1 {
        text-align: center;
        font-size: 11vw;
    }
    li {
        text-align: center;
        margin-left: -30%;
        font-size: 9vw;
        margin-bottom: 10%;
        line-height: 90%;
    }
    ul {
        list-style-type: none;
        margin: 1em auto;
        width: 60%;
        text-align: center;
    }
}
@media screen and (max-width: 1200px) and (min-width: 800px) {
    .header {
        width: 100%;
    }
    .header img {
        width: 80%;
        margin-left: 10%;
    }
    p {
        font-family: 'Roboto', sans-serif;
        font-size: 20px;
        text-align: center;
    }
    a {
        text-decoration: none;
        color: cadetblue;
    }
    a:hover {
        text-decoration: none;
        color: blue;
    }
    a:active {
        text-decoration: none;
        color: cadetblue;
    }
    a:visited {
        text-decoration: none;
        color: cadetblue;
    }
    .section {
        width: 17.3%;
        margin: 3% 1.125%;
        display: inline-block;
        border-radius: 20px;
        background-color: #9fc5c6;
        vertical-align: top;
    }
    .section:hover {
        background-color: cadetblue;
    }
    h1 {
        text-align: center;
        font-size: 2.3vw;
    }
    li {
        text-align: center;
        margin-left: -50%;
        font-size: 2vw;
        margin-bottom: 10%;
        line-height: 90%;
    }
    ul {
        list-style-type: none;
        margin: 1em auto;
        width: 60%;
        text-align: center;
    }
}
@media screen and (min-width: 1200px) {
    .header {
        width: 100%;
    }
    .header img {
        width: 85%;
        margin-left: 7.5%;
    }
    p {
        font-family: 'Roboto', sans-serif;
        font-size: 20px;
        text-align: center;
    }
    a {
        text-decoration: none;
        color: cadetblue;
    }
    a:hover {
        text-decoration: none;
        color: blue;
    }
    a:active {
        text-decoration: none;
        color: cadetblue;
    }
    a:visited {
        text-decoration: none;
        color: cadetblue;
    }
    .section {
        width: 17.4%;
        margin: 3% 1.125%;
        display: inline-block;
        border-radius: 20px;
        background-color: #9fc5c6;
        vertical-align: top;
    }
    .section:hover {
        background-color: cadetblue;
    }
    h1 {
        text-align: center;
        font-size: 2.3vw;
    }
    li {
        text-align: center;
        margin-left: -20%;
        font-size: 2vw;
        margin-bottom: 10%;
        line-height: 90%;
    }
    ul {
        list-style-type: none;
        margin: 1em auto;
        width: 60%;
        text-align: center;
    }
}