:root{
      --font-family: "Special Gothic Expanded One", sans-serif;
      --font-weight: 400;

      --color-bg: white;
      --color-fg: black;

      --animation-dur: 30s;
    }
    html, body{
      margin: 0;
      padding: 0;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      background: var(--color-bg);
    }
    #container{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100vw;
      height: 100vh;
      user-select: none;
      -webkit-user-select: none; 
      -ms-user-select: none;
      opacity: 0;
      animation: fade-in 3s 1s ease-out forwards;

      * {
        margin: 0;
        padding: 0;
        color: var(--color-fg);
        font-family: var(--font-family);
        font-weight: var(--font-weight);
        text-transform: uppercase;
        line-height: 0.8;
        font-size: clamp(100px, 28vh, 33vh);
        user-select: none;

        --translate-val: 8.12em;
        --translate: var(--translate-val);
        animation: marquee var(--animation-dur) ease-in-out infinite alternate;
        animation-delay: calc(-0.5*var(--animation-dur));
      }
      *:nth-child(2n-1){
        --translate: calc(-1 * var(--translate-val));
      }
    }

    @keyframes fade-in{
      from{
        opacity: 0;
      }
      to{
        opacity: 1;
      }
    }

    @keyframes marquee{
      from{
        transform: translateX(0%);
      }
      to{
        transform: translateX( var(--translate) );
      }
    }