:root {
    --navHeight : 8vh;
    --navFontFamily : 'montez';
    --navBackgroundColor: #02706d;
    --navBackgroundColorContrast: #A04907;
    --navBorderColor: rgb(95, 95, 95);
    --navHoverBackgroundColor: rgb(214, 214, 214);
    --navColor: #eeeeee;
    --navFontSize: calc(10px + 2.8vw);
    --navHoverFontSize: calc(7px + 1.5vw);
    --navBorderRadius: 0vw;
    --navOuterBorderWidth: calc(2px + 0.1vw);
}

.navbar {
    height: var(--navHeight);
    backdrop-filter: blur(10px);
    z-index: 1;
    font-family: var(--navFontFamily);
    position: fixed;
    top: 0px; 
    left: 0px;
    display: flex;
    width: 100vw;
    box-sizing: border-box;
    justify-content: space-around;
    align-items: center;
    background-color: var(--navBackgroundColor);
    box-shadow: 0px 2px 6px 2px rgba(1, 53, 51, 0.35);
}

.logo-section {
    display: flex;
    align-content: center;
    justify-content: left !important;
    height: var(--navHeight);
}
.logo-container {
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    justify-content: center !important;
    height: 100%;
}
.logo {
    height: 100%;
    background-color: white;
    cursor: pointer;
}

.navbar-item {
    position: relative;
    display: flex;
    flex-grow:1;
    align-content: center;
    flex-wrap: wrap;
    justify-content: center;
    height: var(--navHeight);
    flex: auto;
    text-align: center;
    font-size: var(--navFontSize);
    transition: 200ms all;
}
.navbar-link {
    color: var(--navColor) !important;
    text-decoration: none;
}


.login-section {
    display: flex;
    align-content: center;
    justify-content: center !important;
    flex: auto;
    height: var(--navHeight);
}
.login-container {
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    justify-content: center !important;
    width: calc(50px + 2.7vw);
    height: calc(50px + 2.7vw);
    box-shadow: -1.5px 1.5px 0px 1.5px var(--navColor);
    border-bottom-left-radius: 0.5vw;
    padding: 0vw;
    transition: 200ms all;
}
.user-login-text {
    color: var(--navColor) !important;
    font-size: var(--navFontSize);
    border-bottom: 2px solid var(--navColor);
    cursor: pointer;
}
.login-btn {
    color: var(--navColor);
    background-color: var(--navBackgroundColorContrast);
    font-size: calc(var(--navFontSize) - 1vw);
    border-radius: 4px;
    border: none;
    padding: 0px 20px 4px 20px;
    transition: 300ms all;
    font-family: "Klee One";
}
.login-icon {
    display: flex;
    width: calc(50px + 1.3vw);
    height: calc(50px + 1.3vw);
    padding: 0vw;
    cursor: pointer;
}
.tab-section {
    align-content: center;
    justify-content: right !important;
    flex: auto;
    height: var(--navHeight);
}
.tab-logo {
    display: flex;
    box-sizing: border-box;
    height: 99%;
    cursor: pointer;
    padding: 5px;
}

.tab-container {
    position: absolute;
    top: 100%;
    right : -1000px;
    box-sizing: border-box;
    box-shadow: -2px 2px 3px 1px rgba(1, 53, 51, 0.35);
    background-color: var(--navBackgroundColor) !important;
    opacity : 0;
    transition: 400ms all;
}

.tab-item:not(:last-child) {
    padding: 5px 25px 5px 25px;
    border-bottom: 1px solid rgba(1, 53, 51, 0.35);
}


.tab-link {
    text-decoration: none;
    color : var(--navColor) !important;
    font-size: calc(var(--navFontSize) + 10px);
    white-space: nowrap;
}