nav {
    position: fixed;
    top: 0;
    left: -21%;
    z-index: 3;

    background-color: var(--background);
    border-right: 2px solid var(--menuBorder);
    width: 25%;
    height: 100%;

    transition: .5s ease;

    @media screen and (max-width: 1200px) {
        width: 50%;
        left: -43%;
    }

    @media screen and (max-width: 979px) {
        /*display: none;*/
        left: 0;
        top: 92%;

        width: 100%;
        border-right: 0;
        border-top: 2px solid var(--menuBorder);
        height: 92%;
    }

    #tabs {
        display: flex;
        border-bottom: 3px solid var(--primary);

        .menuTab {
            padding: 4% 3.5%;
            transition: .5s ease;

            p {
                font-family: oswald;
                font-size: 1.45rem;
                user-select: none;
            }

            &:hover {
                background-color: var(--primary);
                cursor: pointer;
            }
        }

        .selected {
            background-color: var(--primary);
        }
    }

    #tabContent {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;

        .menuTabContents {
            overflow: hidden;
            width: 100%;
            height: 0;

            transition: .75s ease;

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

        .selected {
            height: 100%;
            overflow-y: scroll;
        }

        .menuItem {
            display: flex;
            align-items: center;
            border-bottom: 1px solid var(--primary);

            padding: 2.5%;

            &:hover {
                background-color: var(--primary);
            }

            img {
                aspect-ratio: 1/1;
                width: 8%;
                margin-right: 2.5%;
            }

            p {
                font-family: oswald;
                font-size: 1.4rem;
            }
        }
    }
}