:root {
    --navgiation_items_gap: 0.5rem;
    --navgiation_items_gap_mobile: 4rem;
    --logo_margin: 0.15rem;
    --logo_hegith: max(7dvh, 2.25rem);
    --blue-color-logo: rgba(50, 75, 85, 1.0);
    --yellow-color-logo: rgba(243, 209, 49, 1.0);
}

html {
    /*    overflow-x: clip;
    overflow-y: visible;*/

    /*    width: auto;*/
    scroll-padding-top: 7vh;

}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    background: #fff;
    /*    overflow: clip;*/

    /*    overflow-x: hidden;*/
    /*    scroll-snap-type: y mandatory;*/
    /*    overflow-y: scroll;*/
    height: 100%;
    /*    position: fixed;*/
    /*    -webkit-overflow-scrolling: touch;*/

    margin: 0;
    /*    position: relative;*/
    /*    width: 100dvw;*/
    /*    scroll-behavior: smooth;*/
}

@font-face {
    font-family: "haha";
    src: url("/static/meritus.ttf");
}

.parent {
    /*    overflow-x: clip;
    overflow-y: scroll;*/
    /*    height: 100vh;*/
    /*    scroll-snap-points-y: repeat(100vh);*/
    /*    scroll-snap-type: y mandatory;*/
}

section {
    /*    height: 100vh;
    scroll-snap-align: start;
    position: relative;*/
    overflow-x: clip;
}

@media (min-width: 1000px) {
    #nav_container {
        margin: 0 3dvw;
        height: 100%;
    }
}

.flex {
    display: flex;
    gap: var(--navgiation_items_gap, 1rem);
}

.logo_with_name {
    text-decoration: none;
    cursor: pointer;
    margin-left: 1rem;
}

.logo_with_name:hover {
    text-decoration: none;
}

.logo {
    margin: var(--logo_margin, 1rem) 9dvw;
    height: var(--logo_hegith, 5dvh);
    margin-right: 0;
    margin-left: 0;
}

.affix {
    background-color: var(--blue-color-logo);
}

.company_name {
/*    height: 7dvh;*/
    font-size: max(3dvh, 1.5rem);
    display: flex;
    align-items: center;
    align-content: center;
    color: rgb(210, 210, 211);
    text-decoration: none;
    font-family: haha, regular;
/*    letter-spacing: 1.68px;*/
}

.primary_header {
    overflow-x: clip;
    top: 0;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    z-index: 999;
    width: 100dvw;
    height: 8vh;
    border-bottom: 1px solid hsla(0, 0%, 100%, .15);
    padding-right: 3em;
    backdrop-filter: blur(1rem);
}

.span_hamburger {
    display: none;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    background: #cdcdcd;
    border-radius: 3px;
    z-index: 998;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
        background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
        opacity 0.55s ease;
}

.tablinks {
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    /*    letter-spacing: 0.12em;*/
    /*    word-spacing: 6px;*/
    color: rgb(210, 210, 211);
    text-transform: uppercase;
    font-family: "Brown", Arial, sans-serif;
    font-optical-sizing: auto;
    text-decoration: none;
    letter-spacing: 1.68px;
    display: flex;
    height: 100%;
    text-align: center;
    align-items: center;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
        background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
        opacity 0.55s ease;
    border-radius: 2vw 0;
    padding: 0 0.5vw;
}


.tablinks:hover {
    text-decoration: none;
    background-color: var(--yellow-color-logo);
    color: var(--blue-color-logo);
    border-radius: 2vw 0;
}

/*.span_hamburger:first-child {
    transform-origin: 0% 0%;
}

.span_hamburger:nth-last-child(1) {
    transform-origin: 0% 100%;
}*/

/*.hamburger_slices[data-visible="true"] {
    .span_hamburger {
        opacity: 1;
        transform: rotate(45deg) translate(0, -1px);
        background: #232323;
    }
}

.hamburger_slices[data-visible="true"] {
    .span_hamburger:nth-last-child(3) {
        opacity: 0;
        transform: rotate(0deg) scale(0.2, 0.2);
    }
}

.hamburger_slices[data-visible="true"] {
    .span_hamburger:nth-last-child(2) {
        transform: rotate(-45deg) translate(-2px, -1px);
        /*        translate(-2px, -1px)
}
}

*/

#navigation_menu {
    height: 100%;

    & ul,
    li {
        height: 100%;
    }
}

.primary_navigation {
    list-style: none;
    /*    padding: 2em;*/
    margin: 0;
    /*    background: hsl(0 0% 100% / 0.1);*/
    background: transparent;
    /*    margin-right: 9dvw;*/
    /*    backdrop-filter: blur(1rem);*/
    cursor: pointer;
}

.spacer_nav {
    height: 40vh;
    content: '';
    display: none;
}

.mobile_nav_toggle {
    display: none;
}

@media (min-width: 1000px) {
    .primary_navigation {
        display: flex;
        justify-content: space-between;
        gap: 5dvw;
    }
}

@media (max-width: 1000px) {
    .spacer_nav {
        height: 40vh;
        content: '';
        display: block;
    }

    .primary_navigation {
        display: none;
        gap: var(--navgiation_items_gap_mobile);
        z-index: 997;
        position: fixed;
        display: flex;
        flex-direction: column;
        /*        justify-content: space-between;*/
        /*        padding: 45dvh 5dvw 15dvh 10dvw;*/
        transform: translateX(100%);
        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
        width: 100%;
        margin-top: 4dvh;
        height: 92dvh !important;

        background-color: rgba(0, 0, 0, 0.875);
        text-align: right;
        /*        gap:0;*/
    }

    #navigation_menu li {
        height: auto;
    }

    #navigation_menu .tablinks {
        justify-content: flex-end;
        padding-right: 5vw;
    }

    .primary_header {
        padding-right: 0;
    }

    .primary_navigation[data-visible="true"] {
        display: flex;
        transform: translateX(-100%);
        /*        backdrop-filter: blur(3em);*/

        & li a span {
            overflow-wrap: break-word;
        }
    }

    .span_hamburger {
        display: block;
        /*        right: 2em;*/
    }

    .mobile_nav_toggle {
        display: block;
        position: absolute;
        background: transparent;
        border: none;
        /*        width: 60px;*/
        aspect-ratio: 1;
        /*        top: 1.75rem;*/
        right: 1.75rem;
        z-index: 999;
        cursor: pointer;
    }

    .tablinks {
        /*        word-spacing: 9999rem;*/
        color: rgba(243, 209, 49, 1.0);
        font-size: 1.5rem;
    }

}

.sr-only:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

#hamburger_slices.is-active .span_hamburger:nth-child(1) {
    opacity: 0;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
}

#hamburger_slices.is-active .span_hamburger:nth-child(3) {
    opacity: 0;
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
}

@media (max-width: 1050px) {
    .primary_header {
        padding-right: 0;
    }

    .middle.hidden {
        display: none;
    }
}