/* Navbar */
.navbar {
    background: var(--main-color);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    position: fixed;
    top: 0;
    z-index: 999;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.navbar_container {
    display:flex;
    justify-content: space-between;
    z-index: 1;
    width: 100%;
    max-width: 1300px;
    height: 80px;
    margin: 0 auto;
    padding: 0 4rem;
}

/* Navbar Logo */
.navbar_logo {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-family: Montserrat;
    letter-spacing: .15rem;
    font-size: 3rem;
    font-weight: 900;
    transition: var(--transition-xl);
    z-index: 999;
}

.navbar_logo:hover {
    font-size: 3.5rem;
    transition: var(--transition-l);
}


/* Navbar Hamburger Menu */
.navbar_toggle {
    cursor: pointer;
    z-index: 99;
}

/* Navbar Items */
.navbar_items {
    display: flex;
    align-items: center;
    list-style: none;
    text-align: center;
}

.navbar_item {
    height: 80px;
}

.navbar_link {
    font-size: 1.5rem!important;
    color: var(--body-text-color);
    display: flex;
    align-items: center;
    height: 100%;
    border-radius: 0!important;
}

.navbar_btn {
    height: 100%;
}

.navbar_btn:hover {
    background: var(--accent-color);
    transition: var(--transition-l);
}

.navbar_btn:active {
    color: var(--tertiary-color-light);
    background: var(--tertiary-color);
    transition: var(--transition-m);

}

.nav_text {
    display: none;
    margin-left: 1rem;
}

@media screen and (max-width: 960px) {

    .navbar_container {
        padding: 0;
    }

    .nav_text {
        display: flex;
    }

    .navbar_items {
        display: grid;
        grid-template-columns: 1fr;
        margin: 0;
        width: auto;
        position: absolute;
        top: 100%;
        right: -50vw;
        transition: var(--transition-xl);
        z-index: -1;
        background: var(--main-color);
        border-bottom-left-radius: 2rem;
        overflow: hidden;
        text-align: left;
    }

    .navbar_items.active {
        background: var(--main-color);
        right: 0;
        width: fit-content;
        transition: var(--transition-xl);
        z-index: 1;
        /* height: 65vh; */
    }

    .navbar_logo {
        padding-left: 4rem;
    }

    .navbar_toggle .bar {
        display: block;
        cursor: pointer;
        width: 2rem;
        height: 3px;
        margin: 5px auto;
        transition: var(--transition-xl);
        background: var(--body-text-color);
        z-index: 999;
    }

    .navbar_item {
        width: 100%;
        height: 80px;
        background: var(--main-color);
    }

    .navbar_link {
        align-items: bottom;
        padding: 2rem;
        width: 100%;
        display: table;
        font-size: 2rem;
    }

    .navbar_link:hover {
        padding: 2rem;
    }

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

    #mobile-menu {
        position: absolute;
        top: 20%;
        right: 4rem;
        transform: translate(5%, 20%);
    }

    #mobile-menu.is-active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    #mobile-menu.is-active .bar:nth-child(2) {
        opacity: 0;
    }
    
    #mobile-menu.is-active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

}