body::after {
    content: "";
    position: fixed;
    background-color: rgba(255 255 255 / 0%);
    width: 100vw;;
    height: 100vh;
    z-index: 999;
    top: 0;
    transition-duration: 1s;
transition-property: all;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 0.99);
    visibility: hidden;
   
}   

body:has(.nav-container input:checked)::after {
    content: "";
    position: fixed;
    background-color: rgba(255 255 255 / 90%);
    width: 100vw;
    height: 100vh;
    z-index: 999;
    top: 0;
    transition-duration: 1s;
transition-property: all;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 0.99);
    visibility: visible;
}   


.page-navigation {width: 100%;overflow: hidden;display: flex;flex-direction: column;align-items: center;}


.nav-container {
    display: flex;
    width: 100%;
    height: 0;
    position: fixed;
    top: calc(100vh - 65px);
    background: transparent;
    z-index: 1000;
    }

.nav-container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}

.nav-button {
    color: #ffffff;
    display: flex;
    position: absolute;
    top: 0px;
    height: 65px;
    width: 100%;
    background-color: transparent;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition-duration: 1s;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 0.99);
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Nunito Sans';
    font-size: clamp(0.86rem, 0.4291rem + 0.4754vw, 0.964rem);
    line-height: 2.4em;
    letter-spacing: .043111em;
    word-spacing: 0.21333em;
    font-weight: 818;
    font-style: normal;
    font-stretch: 95%;
    font-variation-settings: "YTLC" 515;
    font-optical-sizing: auto;
    gap: 10px;
    padding-block-start: 14px;
}

.nav-button::before {
    content: "";
    position: relative;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOC4zMzkyNSAyNS42MTA5NSI+PHBhdGggZD0iTTM4LjMzOTI1LDBWMy45NjA5aC0yNi45NjFWMFpNMi44MjgzLDIuNzEzMDVsMTAuMTI4MywxMC4xMjgzTDIuODc4MywyMi45MTk2NS4wNSwyMC4wOTEzNWw3LjI1LTcuMjUtNy4zLTcuM1ptMzUuNTExLDguMTk3ODV2My45NjA5aC0yMC45NjFWMTAuOTEwOVptMCwxMC43MTA5VjI1LjYxMWgtMjYuOTYxVjIxLjYyMThaIiBzdHlsZT0iZmlsbDojZmZmIi8+PC9zdmc+');
    background-repeat: no-repeat;
    width: 2em;
    height: 1em;
    font-size: clamp(0.86rem, 0.4291rem + 0.4754vw, 0.964rem);
    transform: rotate(180deg);
        transition-duration: 1s;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 0.99);
}


.nav-container:has(input:checked) .nav-button {
     color: var(--ok-col-base-blue);
}

.nav-container:has(input:checked) .nav-button::before {
     background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOC42NTY2IDI4LjY1NjYiPjxwYXRoIGQ9Ik0yLjc3ODMsMjguNjU2NiwwLDI1Ljg3ODNsMTEuNTUtMTEuNTVMMCwyLjc3ODMsMi43NzgzLDBsMTEuNTUsMTEuNTVMMjUuODc4MywwbDIuNzc4MywyLjc3ODMtMTEuNTUsMTEuNTUsMTEuNTUsMTEuNTUtMi43NzgzLDIuNzc4My0xMS41NS0xMS41NVoiIHN0eWxlPSJmaWxsOiNmZmYiLz48L3N2Zz4=");
        transition-duration: 1s;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 0.99);
    margin-inline-start: 93px;
    height: 1.3em;
}



.nav-container input:checked ~ .nav-button {
transition-duration: 1s;
transition-property: all;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 0.99);
transform: translateY(calc(-100vh + 65px + 100px));
}

.nav-button:after {content: "";position: absolute;display: flex;width: clamp(17rem, -7.5000rem + 56.0000vw, 24rem);height: 65px;background: var(--ok-col-base-blue);margin-top: 0px;z-index: -1;border-radius: 26px 26px 0 0;box-shadow: 0px 0px 20px -10px rgb(0 0 0 / 35%);} 

.nav-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    z-index: 2;
    font-weight: normal;
    width: 100%;
    background: transparent;
    height: calc(100vh - 100px - 65px);
    top: 65px;
    margin-block: 0;
    list-style-type: none;
    padding-inline: 0px;
    overflow: hidden scroll;
    box-shadow: 0px 0px 20px -10px rgb(0 0 0 / 35%);
    border-block-start: 10px solid var(--ok-col-base-blue);
    backdrop-filter: blur(6px);
    overscroll-behavior: contain;}

.nav-list li {
display: flex;
font-size: 21px;
width: 100%;
flex-direction: column; 
}

.nav-list li a {
    font-size: clamp(1.06rem, 0.1150rem + 2.1600vw, 1.33rem);
    text-align: center;
    line-height: 1.1em;
    padding-block: 1.6em;
    font-family: 'Literata';
    font-weight: 650;
    text-decoration: none;
    letter-spacing: -0.03em;
    color: var(--ok-col-base-blue);
    font-optical-sizing: none;
    hyphens: auto;
    hyphenate-limit-chars: 15 7 7;
    text-transform: none;
    padding-inline: 30px;
}


.nav-list li::after {
    content: "";
    position: relative;
    background: hsl(218deg 26% 20% / 10%);
    height: 1px;
    width: auto;
}

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

}