:root {
    --gutter: 40px;
    --spacing: 20px;

    --ease: cubic-bezier(0.84, 0.01, 0.16, 0.99); /* custom */
    --ease-out: cubic-bezier(0.08, 0.795, 0, 1); /* custom */

    --color-black: rgb(7, 7, 7);

    --blue: #1b2d69;
    --petrol: #016b83;
    --mint: #bbf6e2;
    --purple: #7b6af4;
    --neon: #c4ff35;
}

@media screen and (max-width: 639px) {
    :root {
        --gutter: 24px;
        --spacing: 16px;
        --header-height: 120px;
    }
}

@font-face {
    font-family: "NeueDIN";
    font-style: normal;
    font-weight: 400;

    src:
        url("../fonts/NeueDINVARTrial.woff2") format("woff2"),
        url("../fonts/NeueDINVARTrial.ttf") format("truetype");

    font-display: auto;
}

body {
    font-family: "NeueDIN";
    line-height: 1.5em;
    font-size: 100%;
    text-rendering: optimizeLegibility;

    font-variation-settings:
        "wdth" 118,
        "wght" 420;
}

#stage {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    padding-left: 20vw;

    position: absolute;
    z-index: 1;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

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

#stage {
        padding-left: 10vw
}
    }

#stage figure {
        position: absolute;
        z-index: 2;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
    }

#stage figure picture img {
                object-fit: cover;
                width: 100%;
                height: 100%;
            }

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

#stage figure picture img {
                    object-position: 85% 50%
            }
                }

#stage .pattern-container {
        position: relative;
        z-index: 20;
    }

#stage .bar {
        background-color: var(--blue);
        position: absolute;
        z-index: 6;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 240px;
    }

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

#stage .bar {
            height: 20vh
    }
        }

.text-pattern {
   width: 30vw;
   min-width: 320px;
   margin: 0 auto;

   display: grid;
   grid-template-columns: repeat(5, 1fr);
}

.text-pattern .pat-frame {
      display: block;
      overflow: hidden;

      grid-column: span var(--pat-cols);

      aspect-ratio: var(--pat-cols) / var(--pat-rows);

      transform: translateX(calc(100% / var(--pat-cols) * var(--pat-shift)));
   }

.text-pattern .pat-frame .pat-content {
         width: 100%;
         height: 100%;

         display: flex;
         align-items: center;
         justify-content: center;

         background-color: red;
      }

.text-pattern .pat-frame .pat-content .pat-text {
            color: #fff;

            font-size: calc(2.4vw * var(--pat-rows));
         }

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

.text-pattern .pat-frame .pat-content .pat-text {
               font-size: calc(30px * var(--pat-rows))
         }
            }

.text-pattern .pat-frame:nth-child(1) .pat-content {
            background-color: var(--neon);
         }

.text-pattern .pat-frame:nth-child(1) .pat-content .pat-text {
               color: var(--blue);
            }

.text-pattern .pat-frame:nth-child(2) .pat-content {
            background-color: var(--mint);
         }

.text-pattern .pat-frame:nth-child(2) .pat-content .pat-text {
               color: var(--blue);
            }

.text-pattern .pat-frame:nth-child(3) .pat-content {
            background-color: var(--blue);
         }

.text-pattern .pat-frame:nth-child(4) .pat-content {
            background-color: var(--purple);
         }

#pixel-container {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

#pixel-container .gd-grid {
        width: 100%;
        display: grid;
        grid-template-rows: repeat(var(--gd-rows), 1fr);
        grid-template-columns: repeat(var(--gd-cols), 1fr);

        gap: var(--gd-gap);
    }

.box {
    background-color: #0ae448;
    position: relative;
}

.box:before {
    padding-top: 100%;
    content: "";
    display: block;
}

.box-color-1 {
    background-color: #1b2d69;
}

.box-color-2 {
    background-color: #016b83;
}

.box-color-3 {
    background-color: #bbf6e2;
}

.box-color-4 {
    background-color: #7b6af4;
}

.box-color-5 {
    background-color: #c4ff35;
}

.grow-box {
    background-color: #1b2d69 !important;
}

* {
    margin: 0;
    box-sizing: border-box;
    padding: 0;
}

html {
    /* scroll-behavior: smooth; */
}

body {
    margin: 0;
    padding: 0;

    align-items: center;
    justify-content: center;

    min-height: 100vh;

    background-color: var(--color-black);
    color: #fff;
}

section.section {
    min-height: 100vh;
    width: 100%;
    height: 100%;
}

section.section.active .infotext {
            opacity: 1;
            transition-delay: 0.2s;
        }

#section-1 {
    background-color: var(--blue);
}

#section-3 {
    background-color: #dedede;
    padding-top: 30vh;
    padding-bottom: 30vh;
}

#section-4 {
    padding-top: 30vh;
    padding-bottom: 30vh;
}

.infotext {
    background-color: #313234;
    color: #bbf6e2;
    position: fixed;
    z-index: 1000;
    bottom: var(--gutter);
    right: var(--gutter);

    padding: var(--spacing);
    border-radius: 8px;

    opacity: 0;

    transition: all 0.2s ease-in-out;
}

svg#zwinki {
    position: fixed;
    width: 96px;
    height: 96px;
    top: 40px;
    right: 40px;

    z-index: 400;
}