.nav-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;

    --line-w: 2px;
    --line-col: white;

    mix-blend-mode: exclusion;
    color: white;
}

.nav-container .nav-item {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: auto;
    cursor: pointer;
    padding: 1vw 1.25vw;

    font-family: "neue-haas-unica", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1vw;

    transition: border-width 0.1s;
}

.nav-container .nav-item[data-side="0"] {
    border-top: var(--line-w) solid var(--line-col);
}
.nav-container .nav-item[data-side="1"] {
    border-right: var(--line-w) solid var(--line-col);
}
.nav-container .nav-item[data-side="2"] {
    border-bottom: var(--line-w) solid var(--line-col);
}
.nav-container .nav-item[data-side="3"] {
    border-left: var(--line-w) solid var(--line-col);
}

.nav-container .nav-item:hover {
    border-width: 0px;
}


.nav-container .nav-item.not-ready::after {
    content: "COMING SOON!";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: 70%;
    text-align: center;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.1s;
    /* white-space: nowrap; */
}

.nav-container .nav-item[data-side="1"].not-ready::after {
    top: 50%;
    right: 100%;
    left: unset;
    transform: translate(0, -50%);
    text-align: right;
}
.nav-container .nav-item[data-side="2"].not-ready::after {
    top: unset;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, 0);
}
.nav-container .nav-item[data-side="3"].not-ready::after {
    top: 50%;
    left: 100%;
    transform: translate(0, -50%);
    text-align: left;
}

.nav-container .nav-item.not-ready:hover::after {
    opacity: 1;
}


.nav-container .label {
    font-family: "neue-haas-unica", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 0.75vw;
    position: absolute;
}

.nav-container .nav-w-label {
    top: 0.3vw;
    left: 50%;
    transform: translate(-50%, 0);
}

.nav-container .nav-h-label {
    left: 0.2vw;
    top: 50%;
    transform: translate(0, -50%) rotate(90deg);
}

@media (max-width: 800px) {
    .nav-container .nav-item {
        font-size: 3vw;
        padding: 1.25vw 2vw;
    }

    .nav-container .label {
        font-size: 1.75vw;
    }

    .nav-container .nav-item.not-ready:hover::after {
        opacity: 0;
    }

    .nav-container .nav-item:hover {
        border-width: var(--line-w);
    }
}