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

body {
    --background: #f0f4f7;
    --green: #008631;
    --darkGreen: #006400;
    --midGreen: #00c151;
    --lightGreen: #E0F8E4;
    --lightBlue: #E0F2F1;
    --white: whitesmoke;
    --yellow: #f9c74f;

    --textColor: #3c3c3c;

    font-family: Tahoma, sans-serif;

    color: var(--textColor);

    width: 100vw;

    overflow-x: hidden;
}

/* Navbar */

nav {
    width: 100%;

    background-color: var(--green);

    display: flex;
    justify-content: center;
    flex-direction: column;
}

.navTop {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 25px;
}

.mainTitle {
    font-size: 45px;

    color: var(--white);
}

.mainLogo {
    width: 15vw;

    margin-top: 20px;
}

.navLinks {
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: var(--darkGreen);

    padding: 15px;
}

.navLink {
    color: var(--white);
    text-decoration: none;

    font-size: 18px;

    margin: 0 20px;
}

.link {
    color: var(--white);
    text-decoration: none;

    font-size: 18px;
}

.link:hover {
    color: var(--yellow);

    transition: 0.5s;
}

/* Main Site */

.mainContainer {
    display: flex;
    min-height: calc(80vh - 15vw);
    flex-direction: column;
    justify-content: space-between;
}

footer {
    width: 100vw;

    background-color: var(--green);

    padding: 20px;
    padding-right: 40px;

    font-size: 20px;
    font-weight: bold;

    display: flex;
    justify-content: space-between;

    color: var(--white);
}

/* Media Queries */

@media (max-width: 768px) {
    .navTop {
        padding: 25px;
    }

    .mainTitle {
        font-size: 30px;
    }

    .mainLogo {
        width: 30vw;
    }

    .navLinks {
        padding: 12px;
    }

    .navLink {
        font-size: 14px;

        margin: 0 10px;
    }

    footer {
        font-size: 16px;
    }
}

@media (max-width: 550px) {
    .navLinks {
        justify-content: center;
        flex-wrap: wrap;
    }
}