@import "https://cdn.jsdelivr.net/gh/mshaugh/nerdfont-webfonts@v3.3.0/build/firacode-nerd-font.css";

* {
    font-family: "3270 Nerd Font";
}


@keyframes wiggle {
    0% { -webkit-transform: skewX(0deg); }
    75% { -webkit-transform: skewX(0deg); }
    77.5% { -webkit-transform: skewX(55deg); }
    80% { -webkit-transform: skewX(-90deg); }
    82.5% { -webkit-transform: skewX(29deg); }
    85% { -webkit-transform: skewX(-90deg); }
    87.5% { -webkit-transform: skewX(3deg); }
    90% { -webkit-transform: skewX(-2deg); }
    92.5% { -webkit-transform: skewX(1deg); }
    95% { -webkit-transform: skewX(10deg); }
    97.5% { -webkit-transform: skewX(-90deg); }
    100% { -webkit-transform: skewX(-8deg); }
}

@keyframes glitch-5 {
  0.00%,
  33.33%,
  43.33%,
  66.67%,
  76.67%,
  100.00% {
    transform: none;
    filter: hue-rotate(0);
    box-shadow: 0px 0px rgba(246, 0, 153,0.8),
                0px 0px rgba(15, 210, 255,0.8),
                0px 0px rgba(255, 210, 0, 1);
  }

  33.43%,
  43.23% {
    transform: translateX(var(--glitch-x-1));
    filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(
        2px 3px 0 rgb(0 0 255 / 0.1)
      );
    box-shadow: 40px 20px rgba(246, 0, 153,0.8),
                -100px -50px rgba(15, 210, 255,0.8),
                5px -10px rgba(255, 210, 0, 1);
  }

  66.77%,
  76.57% {
    transform: translateX(var(--glitch-x-2));
    filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(
        -3px 0px 0 rgb(0 0 255 / 0.1)
      );
    box-shadow: 7px 15px rgba(246, 0, 153,0.8),
                -20px -3px rgba(15, 210, 255,0.8),
                5px -4px rgba(255, 210, 0, 1);
  }
}

.center {
    display: flex;
    justify-content: center;
}

img{
    width: 90%;  
}

body {font-size: 16px}

#title-container {
    background-color: black;
    position: absolute;
    rotate: 47.3deg;
    inset-inline-start: 34vw;
    inset-block-start: 15vw;
    height: 7vw;
    width: 32vw;
        --glitch-x-1: 30px;
    --glitch-hue-1: 16deg;
    --glitch-x-2: -75px;
    --glitch-hue-2: -18deg;

    background-position: 0 -14px;
    animation: glitch-5 5.4841s infinite;
}


#title {
    animation: wiggle 4.86554s infinite;
    font-size: 6vw;
    color:rgba(255,255,255,0.95);
    rotate: 47.3deg;
    position: absolute;
    inset-inline-start: 31vw;
    inset-block-start: 16.5vw;
    text-shadow:1px 1px rgba(246, 0, 153,0.8),
                -2px -1px rgba(15, 210, 255,0.8),
                -1px 0px rgba(255, 210, 0, 1);
}