.navigation {
    display: flex;
    position: fixed;
    left: calc(50vw + 286px);
    top: 50%;
    align-content: flex-end;
    animation: slide-up 1.75s 1 ease-in-out;
    width: 16rem;
    z-index: 30;
}

.navigation__content {
    display: grid;
    grid-gap: 1rem;
    grid-auto-rows: max-content;
    align-items: flex-start;
}

.navigation__item {
    list-style-type: none;
}

.navigation__item a {
    text-decoration: none;
    color: var(--primary-dark);
    text-transform: uppercase;
    font-weight: 500;
    font-size: 1rem;
}

.navigation__close {
    visibility: hidden;
    position: absolute;
    top: 4rem;
    right: 4rem;
    color: var(--secondary-main);
    align-self: flex-end;
    background: none;
    border: none;
    padding: 0;
}

.navigation__item a:hover {
    color: var(--primary-main);
    height: 1.1rem;
}

@media screen and (max-width: 1270rem) and (min-width: 900px){
    .navigation {
        left: calc(71.25vw + 1rem);
    }
}

@media only screen and (max-height: 850px) {
    .navigation {
        top: 425px;
    }
}

@media only screen and (max-width: 1200px) {
    .navigation {
        visibility: hidden;
        bottom: 0;
        left: 0;
        right: 0;
        top: 100%;
        max-height: 30rem;
        background-color: var(--primary-dark);
        z-index: 5000;
        justify-content: flex-start;
        align-items: flex-end;
        grid-gap: 1rem;
        transition: .25s;
        width: 100%;
    }
    
    .navigation.open {
        visibility: visible;
        top: 50%;
    }
    
    .navigation__content {
        padding: 4rem;
    }

    .navigation.open .navigation__close {
        visibility: visible;
    }

    .navigation.open .navigation__close {
        animation: spin .75s ease-out;
    }

    .navigation__item a {
        color: white;
    }
}

@keyframes slide-up {
    from {
        top: 60%;
        opacity: 0;
    }
}