.nav-container {
    display: grid;

    padding-top: 32px;
    padding-bottom: 32px;

    width: min(100%, 1400px);

    justify-self: center;
    align-self: start;
    background-color: white;

    z-index: 3;
}

@media(min-width: 992px) {
    .nav-container {
        background-color: white;

    }
}

@media(min-width: 1200px) {
    .nav-container {
        background-color: white;

    }
}

.logo {
    max-width: 200px;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.logo-container {
    display: grid;
    justify-self: center;
    align-self: center;

    max-width: 90vw;

}

@media(min-width: 992px) {
    .logo-container {}
}

@media(min-width: 1200px) {
    .logo-container {
        grid-row: 1;

        justify-self: start;

        align-self: center;
    }
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.link-container {
    display: none;
    grid-gap: 8px;
    align-self: center;
    padding: 16px 0;
    box-sizing: border-box;

    justify-self: center;
}

@media(min-width: 992px) {
    .link-container {
        font-family: "forma-djr-deck", sans-serif;
        font-weight: 400;
        font-style: normal;
    }
}

@media(min-width: 1200px) {
    .link-container {
        font-family: "forma-djr-deck", sans-serif;
        font-weight: 400;
        font-style: normal;
        display: grid;

        grid-row: 1;

        grid-gap: 16px;

        justify-self: end;
    }
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.nav-toggle {
    display: grid;

    align-self: center;

    justify-self: center;

    font-size: 24px;

    padding: 8px;

    box-sizing: border-box;

    margin-top: 32px;

    color: #000000;
}

@media(min-width: 1200px) {
    .nav-toggle {
        display: none;
    }
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.page-link p {
    font-family: "vollkorn", serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;
}

.page-link {
    font-family: "vollkorn", serif;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
    text-decoration: none;

    justify-self: center;

    color: var(--colour1);

    text-transform: uppercase;
}

@media(min-width: 992px) {
    .page-link {}
}

@media(min-width: 1200px) {
    .page-link {
        grid-row: 1;
    }
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.active-link {}

@media(min-width: 992px) {
    .active-link {}
}

@media(min-width: 1200px) {
    .active-link {
        grid-row: 1;
    }
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.hide-icon {
    display: none;
}

.show-nav {
    display: grid !important;
}