/* NAVBAR */

.navbar-container {
    width: 100%;
    height: 90px;

    /*position: fixed;*/

    position: absolute;

    top: 0;

    z-index: 10;

    /*background-image: linear-gradient(transparent 50%, #2222225c 50%);
    background-position: 0% 200%;
    background-repeat: no-repeat;
    background-size: 200% 200%;*/

    transition: all 1s ease;
}

.navbar-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;

    margin: 10px;

    height: calc(90px - 20px);
    width: calc(100% - 20px);
    
    z-index: 10;

    position: relative;
}

.navbar-logo {
    width: 100px;
    height: 50px;

    margin: 10px;

    position: relative;
}

.navbar-logo img {
    height: 50px;
    pointer-events: none;
}

.mnavbar-logo {
    width: 200px;
    height: 100px;

    margin: 10px;

    position: relative;
}

.mnavbar-logo img {
    height: 100px;
    pointer-events: none;
}


.navbar-links {
    display: flex;
    flex-direction: row;
    align-items: center;

    gap: 10px;
}

.navbar-link {
    color: var(--text-colour);
    
    backdrop-filter: blur(10px);

    text-decoration: none;

    /*background: var(--secondary-colour);*/
    padding: 8px 20px;

    border-radius: 5px;

    box-shadow: 0 0 2px rgba(0, 0, 0, 0.384);

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;

    width: 100%;

    transition: all .2s ease;
}

.navbar-link:hover {
    transform: scale(1.05);
}

.navbar-link span {
    font-size: 18px;
    font-weight: 250;
}

.navbar-buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    position: relative;
}

.navbar-button {
    color: var(--text-colour);
    
    text-decoration: none;

    background: linear-gradient(45deg, var(--primary-accent-colour), var(--secondary-accent-colour));
    font-weight: 600;
    padding: 8px 20px;

    box-shadow: 0 0 2px var(--secondary-accent-colour);

    border-radius: 5px;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;

    width: 100%;

    transition: all .2s ease;
}

.navbar-button:hover {
    transform: scale(1.05);
}

.mobile-navbar-container {
    display: none !important;
    z-index: 3;
}

.mobile-links-menu {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: space-between;

    padding: 100px 20%;

    height: calc(100% - 200px);
    width: 60%;
    position: absolute;
    z-index: 4;

    background: #19191988;
    backdrop-filter: blur(10px);

    top: -100%;

    transition: all .5s;
}

.mobile-navbar-links {
    display: flex;
    flex-direction: column;
    gap: 10px;

    width: 100%;
}

.mobile-navbar-link {
    color: var(--text-colour);
    text-decoration: none;

    font-weight: 700;

    transition: all .2s ease;

    cursor: pointer;

    width: 100%;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    border: 1px solid rgb(129, 129, 129, 0.1);  
}

.mobile-navbar-link:hover {
    background: #20202042;
    border: 1px solid gray;
}

.mobile-navbar-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;

    width: 100%;
}

.mobile-navbar-button {
    color: var(--text-colour);
    text-decoration: none;

    font-weight: 700;

    transition: all .2s ease;

    cursor: pointer;

    background-color: var(--primary-accent-colour);

    width: 100%;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    border: 1px solid var(--primary-accent-colour);
}

.mobile-navbar-button:hover {
    background-color: transparent;
}


.mobile-navbar-container {
    width: 100%;
    height: 90px;

    position: absolute;

    top: 0;

    z-index: 10;

    transition: all 1s ease;

    background: rgba(0, 0, 0, 0.05);
}

.mobile-navbar-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    margin: 10px;

    height: calc(90px - 20px);
    width: calc(100% - 20px);
    
    z-index: 10;

    position: relative;
}

.mobile-navbar-menu-button {
    position: absolute;

    padding: 10px;

    right: 0;
}

.mobile-navbar-menu-button a span {
    font-size: 50px;
    color: var(--text-colour);
}

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

    /* NAVBAR SQUISHIFY LOL */

    .navbar-container {
        display: none;
    }

    .mobile-navbar-container {
        display: flex !important;
    }

}