.navbar {
    display: flex;
    height: 80px;
    background-color: var(--surface);
    flex-direction: row;
    align-items: center;
}

@media only screen and (max-width: 632px) {
    .navbar .tab {
        font-size: 4.1vw;
    }
}

@media only screen and (min-width: 633px) {
    .navbar .tab {
        font-size: 20px;
    }
}

.navbar .tab {
    margin-right: 12px;
    padding-right: 8px;
    padding-left: 8px;
    color: var(--on-surface-variant);
    font-weight: 500;
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.navbar .tab:hover {
    border-radius: 28px;
    height: 56px;
    background-color: color-mix(in srgb, var(--on-surface-variant) 8%, transparent);
}

.navbar .tab-wraper {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin: 0px auto 0px auto;
    align-items: center;
    justify-content: center;
}

.navbar .tab-wraper .active {
    display: flex;
    justify-content: center;
    background-color: var(--secondary-container);
    border-radius: 28px;
    height: 56px;
    color: var(--on-secondary-container);
}

.navbar .tab-wraper .active:hover {
    background-color: color-mix(in srgb, var(--on-surface) 8%, var(--secondary-container));
}

.navbar .contact-fab {
    display: flex;
    transition: background-color 0.2s, box-shadow 0.2s;
    transition-timing-function: var(--standard-transition);
    height: 40px;
    font-size: 20px;
    font-weight: 500;
    color: var(--on-primary);
    background-color: var(--primary);
    z-index: 22;
}

.navbar .contact-fab .material-symbols-outlined {
    font-size: 36px;
    height: 36px;
    width: 36px;
    font-weight: 200;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

@media only screen and (max-width: 631px) {
    .navbar .contact-fab {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: 16px;
        right: 16px;
        border-radius: 28px;
        height: 96px;
        width: 96px;
        box-shadow: var(--elevation-3);
    }
}

@media only screen and (min-width: 632px) {
    .navbar .contact-fab {
        position: absolute;
        padding: 8px;
        margin-left: 32px;
        border-radius: 18px;
        align-items: center;
    }
}

@media only screen and (max-width: 832px) {
    .navbar .contact {
        position: relative;
    }
}

.navbar .contact:hover {
    background-color: color-mix(in srgb, var(--on-primary-container) 8%, var(--primary));
    box-shadow: var(--elevation-1);
}

.navbar .logo {
    background-color: var(--secondary-container);
    display: flex;
    padding: 0.6vw;
    justify-content: center;
    aspect-ratio: 1 / 1;
}