:root {
    --bg-color: #050505;
    --strip-height: 17vh;
    --tilt-angle: -9deg;
    /* --transition-speed: 0.5s; */
    --btn-width: calc(var(--strip-height) / 2);
    --nav-btn-size: 11vh;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    position: relative;
    background-color: var(--bg-color);
    font-family: 'Outfit', sans-serif;
}

.page-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

@media (max-width: 768px) {
    :root {
        --strip-height: 12vh;
        --nav-btn-size: 6vh;
    }

    .nav-controls {
        position: fixed;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        bottom: 12dvh;
        width: max-content;
        justify-content: center;
        gap: 2vh;
        z-index: 999;
    }
}

.skewed-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(var(--tilt-angle));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: visible;
    width: 0;
    height: 0;
}

.strip {
    height: var(--strip-height);
    width: 200vw;
    position: relative;
    overflow: hidden;
    background: #111;
    cursor: pointer;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.strip:nth-child(odd) {
    transform: translateX(-50%);
}

.strip:nth-child(even) {
    transform: translateX(50%);
}

.strip-bg {
    position: absolute;
    inset: 0;
    background-size: contain;
    background-repeat: no-repeat;
    filter: grayscale(100%) brightness(0.85);
    /* transition: filter var(--transition-speed) ease; */
}

.strip:nth-child(odd) .strip-bg {
    background-position: right center;
}

.strip:nth-child(even) .strip-bg {
    background-position: left center;
}

.strip:hover .strip-bg {
    filter: grayscale(0%) brightness(1);
}

.strip-actions {
    position: absolute;
    top: 0;
    height: 100%;
    width: var(--btn-width);
    display: flex;
    flex-direction: column;
    z-index: 10;
}

.strip:nth-child(odd) .strip-actions {
    right: 0;
    left: auto;
}

.strip:nth-child(even) .strip-actions {
    left: 0;
    right: auto;
}

.action-btn {
    width: 100%;
    height: 50%;
    border: none;
    cursor: pointer;
    color: #000;
    font-size: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    text-decoration: none;
}

.action-btn:nth-child(1) {
    background: #fff;
    transition-delay: 0.1s;
}

.action-btn:nth-child(2) {
    background: #ddd;
    transition-delay: 0.33s;
}

.strip:nth-child(odd) .action-btn {
    transform: translateX(105%);
}

.strip:nth-child(even) .action-btn {
    transform: translateX(-105%);
}

.strip:hover .action-btn,
.strip:active .action-btn {
    transform: translateX(0);
}


.nav-controls {
    position: absolute;
    bottom: 5vh;
    right: 5vh;
    display: flex;
    gap: 2.5vh;
    z-index: 100;
}

.nav-btn {
    width: var(--nav-btn-size);
    height: var(--nav-btn-size);
    font-size: calc(var(--nav-btn-size) * 0.42);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    color: #050505;
    text-decoration: none;
}

.action-btn:hover,
.nav-btn:hover {
    filter: brightness(0.6);
}

.action-btn img,
.nav-btn img {
    height: 1em;
    width: auto;
    display: block;
}