@media only screen and (min-width: 200px) {

    .header {
        /* This determines the tab at the top of the screen */
        padding: 15px;
        height: 80px;
        text-align: center;
        width: 100%;
        position: sticky;
        top: 0;
        background: #263023;
    }

    .header button {
        float: left;
    }

    .Item {
        /* This divides each page link evenly */
        margin-left: 5px;
        margin-right: 5px;
        margin-bottom: 6px;
        width: 80px;
        text-align: center;
        color: dimgrey;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        font-size: 16px;
        width: 28%;
    }

    .center {
        /* Makes all text and images centered */
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 90%;
    }

    body {
        font-size: 18px;
    }
}

@media only screen and (min-width: 800px) {

    

    .header {
        /* This determines the tab at the top of the screen */
        padding: 15px;
        height: 30px;
        text-align: center;
        width: 100%;
        position: sticky;
        top: 0;
        background: #263023;
    }

    .header button {
        float: left;
    }

    .Item {
        /* This divides each page link evenly */
        margin-left: 15px;
        margin-right: 15px;
        margin-bottom: 5px;
        width: 80px;
        text-align: center;
        color: dimgrey;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        font-size: 12px;
    }

    .center {
        /* Makes all text and images centered */
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 70%;
    }

    body {
        font-size: 14px;
    }

}

body {
    /* Makes it so the header can reach the corners of the page */
    margin: 0px;
}

    .left {
        float: left;
    }

    .right {
        float: right;
    }

    .middle {
        float: none;
    }


    .Item:hover {
        /* Changes the link's colour to white when hovered over */
        color: white;
    }

    html {
        /* Sets the background to a dark green */
        background-color: #191d19;
        color: white;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }


    .link {
        background: none;
        border: none;
        cursor: pointer;
    }

    body::-webkit-scrollbar{
        display:none;
    }