nav {
    display: flex;
    justify-content: center;
    padding-top: 2rem;
}

nav ul {
    display: flex;
    list-style-type: none;
}

nav a {
    padding: 1rem;
    color: #A79B9B;
    font-weight: bolder;
    text-decoration: none;
    font-size: 1.25rem;
    text-transform: uppercase;

    &:hover {
        color: white;
        /* font-size: 1.5rem; */
    }
}

nav a.disabled {

    &:hover {
        color: #A79B9B;
        /* font-size: 1.5rem; */
    }
}

nav button.menu {
    display: none;
    /* color: rgb(237, 237, 237); */
}

nav li.case-study {
    position: relative;
}

nav li.case-study div.toast {
    color: rgb(15, 15, 1);
    border: 1px solid white;
    position: absolute;
    left: 0px;
    top: 2rem;
    padding: .5rem;
    background-color: #fff;
    box-shadow: 1px -2px 2px 2px gray;
}

nav li.case-study div.toast span {
    display: block;
    height: .25rem;
    width: 100%;
    background-color: green;
    border-radius: 5%;
    margin-top: .5rem;
    animation-name: animateToast;
    animation-duration: 7.5s;
}

/* toast disappearance animation */
@keyframes animateToast {
    0% {
        width: 100%;
    }

    100% {
        width: 0%;
    }
}

nav a#case-study-link.disabled {
    cursor: not-allowed;
}

@media screen and (max-width: 564px) {
    nav {
        position: relative;
        /* border: 1px solid rgb(255, 204, 0); */
    }

    nav ul {
        display: none;
        border: 1px solid rgb(212, 212, 232);
        background-color: rgb(255, 255, 255);
        max-width: 13rem;
        position: absolute;
        top: 4rem;
        right: .25rem;
        z-index: 19;
        border: 1px solid rgb(255, 204, 0);
        margin: 0px;
        padding: 1rem;
    }

    nav button.menu {
        display: inline-block;
        position: absolute;
        right: .25rem;
        border: none;
        padding: .25rem;
        box-shadow: 1px 1px 2px gray;
        z-index: 1;
    }
}

.mobile-nav {
    display: block;
}

.hide {
    display: none;
}