:root {
    --slide-count: 6;
    --total-width: calc(100vw * var(--slide-count));
}

article {
    display: flex;
    flex-direction: row;
    justify-items: start;
    align-items: center;
    left: 0;

    position: fixed;
    top: calc(var(--navbar-unit) * 8);
    width: var(--total-width) !important;
    height: calc(100vh - var(--navbar-unit) * 8);
    padding: 0 !important;

    overflow: clip !important;

    background-color: #f9e4d1;
}

/* horrible evil media query because
   chrome hates following good browsing practices */
@media (pointer: fine) or (pointer: none) {

    :root,
    body {
        overflow-x: clip;
        overflow-y: scroll;
        scroll-snap-type: y mandatory;
        height: calc(100vh * var(--slide-count)) !important;

        flex-direction: column;

    }

    .ss-snap-align {
        top: calc(var(--ss-snap-idx) * 100vh);
        left: 0;
    }
}

@media (pointer: coarse) {

    #content,
    main {
        width: var(--total-width) !important;
    }

    :root,
    body {
        overflow-x: scroll;
        overflow-y: clip;
        scroll-snap-type: x mandatory;
        height: 100vh !important;

        flex-direction: row;
    }

    article {
        position: absolute;
        animation: none !important;
        left: 0;
    }

    .ss-snap-align {
        left: calc(var(--ss-snap-idx) * 100vw);
        top: 0;
    }

    .ss-graphic {
        animation: none !important;
    }
}

@media (scripting: true) {}

@keyframes punch-in {
    0% {
        transform: translateX(100vw) scaleX(0%);
    }

    100% {
        transform: translateX(0) scaleX(100%);
    }
}

#punch {
    width: 80vw;
    font-size: 12vw;
    font-variant-caps: small-caps;
    text-wrap: nowrap;
    filter: blur(0.01vw) drop-shadow(0.5vw 0.5vw 0.0vw var(--dark1));
    /* filter: drop-shadow(0.6vw 0.5vw 0.05vw var(--dark1)); */
}

.navbar {
    position: fixed !important;
}

.scroll-tracker {
    display: none !important;
}

.ss-slide {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50vw;
    height: 100%;

    z-index: 1;
    background-color: var(--slide-color);
}

.ss-snap-align {
    position: absolute;
    scroll-snap-align: start;
    height: 100vh;
    width: 100px;
}

.ss-title {
    font-size: 150%;
}

.ss-postertext {
    display: flex;
    flex-direction: column;
    align-items: center;

    font-size: calc(min(1vh, 1vw) * 1.5 + 0.5rem);
    word-spacing: 0.17em;
    letter-spacing: 0.02em;
    line-height: 1.4em;
    font-weight: 600;
    padding: 2em;

    max-width: 60%;

    z-index: 1;
}

.ss-postertext>h3 {
    text-align: center;
    line-height: 1em;
}

.ss-postertext hr {
    position: relative;
    width: 30vw;
    margin-bottom: 4vh 0;
    border-color: #f9e4d1;
}

.ss-footer {
    position: relative;
    top: 10vh;
    margin-bottom: 8vh;
    font-weight: 500;

    font-size: 70%;
    line-height: 110%;
}

.ss-graphic {
    width: 30vw;
    margin-left: 10vw;
    margin-right: 10vw;
}

.ss-notoo {
    max-width: 100%;
}

.ss-leftb {
    position: absolute;
    left: calc(-7.5vw + 20px);
    width: 7.5vw;
    height: 100%;

    transform: scaleX(-1);
}

.ss-rightb {
    position: absolute;
    right: calc(-7.5vw + 20px);
    width: 7.5vw;
    height: 100%;
}

.ss-bfill {
    fill: var(--slide-color);
}

.ss-img-collection {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.ss-subgraphic {
    width: 16vw;
    filter: invert(1);
}

.ss-footerhack .first-row-images {
    display: none;
}

.ss-footerhack .first-row .first-row-text p,
.ss-footerhack .second-row {
    line-height: normal !important;
}

.ss-footerhack div.first-row,
.ss-footerhack div.second-row,
.ss-footerhack div.third-row {
    padding: 0 !important;
}

@keyframes ss-logos {
    0% {
        transform: scale(80%) rotateZ(-60deg);
        gap: 100vh;
    }

    33% {
        gap: 4rem;
        transform: scale(100%) rotateZ(0deg);
    }

    66% {
        gap: 4rem;
        transform: scale(100%) rotateZ(0deg);
    }

    100% {
        transform: scale(75%) rotateZ(15deg);
    }
}

@keyframes ss-lil-guy {
    0% {
        transform: scale(100%) rotateZ(-3deg);
    }

    100% {
        transform: scale(75%) rotateZ(15deg);
    }
}


@keyframes ss-hospital {
    0% {
        transform: scale(0%);
    }

    33% {
        transform: scale(100%);
    }

    67% {
        transform: scale(100%);
    }

    100% {
        transform: scale(0%);
    }
}

@keyframes ss-molecules {
    0% {
        transform: scale(50%) rotateZ(-180deg);
    }

    33% {
        transform: scale(100%) rotateZ(0deg);
    }

    67% {
        transform: scale(100%) rotateZ(0deg);
    }

    100% {
        transform: scale(50%) rotateZ(180deg);
    }
}

@keyframes ss-canister {
    0% {
        transform: translateY(20%) scale(50%);
    }

    33% {
        transform: scale(100%);
    }

    67% {
        transform: scale(100%);
    }

    100% {
        transform: translateY(20%) scale(50%);
    }
}