@font-face {
  font-family: "Nabla";
  src: url("../fonts/Nabla/Nabla-Regular-VariableFont_EDPT\,EHLT.ttf")
      format("truetype"),
    url("../Nabla-woff/Nabla-Regular.woff2") format("woff2"),
    url("../Nabla-woff/Nabla-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Bangers";
  src: url("../fonts/Bangers/Bangers-Regular.ttf") format("truetype"),
    url("../fonts/Bangers-woff/Bangers-Regular.woff2") format("woff2"),
    url("../fonts/Bangers-woff/Bangers-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

:root {
  --f-size: 15;
  --f-unit: 1vmin;
  --f: calc(var(--f-size) * var(--f-unit));
  --bg: #000000;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

body {
  font-size: var(--f);
  background-color: var(--bg);
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  text-align: center;
}

.glitch {
  padding-top: 60px;
  flex: 1;
  line-height: 1.2;
  margin: auto;
  font-family: "Bangers", system-ui;
  color: #B6F500;
  text-align: center;
  transform: scaleX(var(--scale, 1));
  animation: glitch-p 11s infinite alternate;
}

.glitch::before,
.glitch::after {
  --top: 0;
  --left: 0;
  --v-height: 30%;
  --n-tenth: calc(var(--f-size) * 0.1 * var(--top));
  --t-cut: calc(var(--n-tenth) / var(--f-size) * 100%);
  --b-cut: calc(var(--t-cut) + var(--v-height));
  content: attr(data-text);
  position: absolute;
  width: 100%;
  left: 0;
  text-align: center;
  transform: translateX(calc(var(--left) * 100%));
  filter: drop-shadow(0 0 transparent);
  text-shadow: calc(var(--left) * -3em) 0 0.02em rgb(0, 255, 255),
    calc(var(--left) * -6em) 0 0.02em #ff00e1;
  background-color: var(--bg);
  clip-path: polygon(
    0% var(--t-cut),
    100% var(--t-cut),
    100% var(--b-cut),
    0% var(--b-cut)
  );
}
.glitch::before {
  animation: glitch-b 1.7s infinite alternate-reverse;
}
.glitch::after {
  animation: glitch-a 3.1s infinite alternate;
}

@keyframes glitch-p {
  17% {
    --scale: 0.87;
  }
  31% {
    --scale: 1.1;
  }
  37% {
    --scale: 1.3;
  }
  47% {
    --scale: 0.91;
  }
  87% {
    --scale: 1;
  }
}
@keyframes glitch-a {
  10%,
  30%,
  50%,
  70%,
  90% {
    --top: 0;
    --left: 0;
  }
  0% {
    --v-height: 15%;
  }
  20% {
    --left: 0.005;
  }
  40% {
    --left: 0.01;
    --v-height: 20%;
    --top: 3;
  }
  60% {
    --left: 0.03;
    --v-height: 25%;
    --top: 6;
  }
  80% {
    --left: 0.07;
    --v-height: 5%;
    --top: 8;
  }
  100% {
    --left: 0.083;
    --v-height: 30%;
    --top: 1;
  }
}
@keyframes glitch-b {
  10%,
  30%,
  50%,
  70%,
  90% {
    --top: 0;
    --left: 0;
  }
  0% {
    --v-height: 15%;
    --top: 10;
  }
  20% {
    --left: -0.005;
  }
  40% {
    --left: -0.01;
    --v-height: 17%;
    --top: 3;
  }
  60% {
    --left: -0.03;
    --v-height: 35%;
    --top: 6;
  }
  80% {
    --left: -0.07;
    --v-height: 5%;
    --top: 8;
  }
  100% {
    --left: -0.083;
    --v-height: 30%;
    --top: 1;
  }
}

.glitchy {
  font-family: "Nabla", system-ui;
  font-size: 2.5rem;
  animation: rubberBand 3s infinite;
}

@-webkit-keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.box {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

footer {
  position: fixed;
  margin-top: 70px;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
}

.bottom {
  font-size: 16px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: #c8c8c8;
}

.bottom i {
  color: #ff00e1;
  animation: pulse 1s infinite alternate;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
    text-shadow: 0 0 5px #ff00e1;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
    text-shadow: 0 0 15px #ff00e1, 0 0 30px #ff00e1;
  }
  100% {
    transform: scale(1);
    opacity: 0.8;
    text-shadow: 0 0 5px #ff00e1;
  }
}

.bottom a {
  color: #c8c8c8;
}

.bard {
  margin: 20px auto 40px;
  width: 85em;
  height: 82em;
}

@media (min-width: 360px) {
  .bard {
    font-size: 3px;
  }
}
@media (min-width: 600px) {
  .bard {
    font-size: 4px;
  }
}
@media (min-width: 1000px) {
  .bard {
    font-size: 5px;
  }
}

.bard img {
  width: 100%;
  height: 100%;
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  left: 0;
  top: 0;
}

.strip {
  overflow: hidden;
  position: relative;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  background-size: 100% auto;
  background-image: url(./Preview.png);
}

@keyframes glitch-5 {
  0.00%,
  33.33%,
  43.33%,
  66.67%,
  76.67%,
  100.00% {
    transform: none;
    filter: hue-rotate(0) drop-shadow(0 0 0 transparent);
  }
  33.43%,
  43.23% {
    transform: translateX(var(--glitch-x-1));
    filter: hue-rotate(var(--glitch-hue-1))
      drop-shadow(0px -4px 0 rgba(0, 0, 255, 0.1));
  }
  66.77%,
  76.57% {
    transform: translateX(var(--glitch-x-2));
    filter: hue-rotate(var(--glitch-hue-2))
      drop-shadow(-1px 0px 0 rgba(255, 0, 0, 0.1));
  }
}
@keyframes glitch-6 {
  0.00%,
  33.33%,
  41.67%,
  66.67%,
  75.00%,
  100.00% {
    transform: none;
    filter: hue-rotate(0) drop-shadow(0 0 0 transparent);
  }
  33.43%,
  41.57% {
    transform: translateX(var(--glitch-x-1));
    filter: hue-rotate(var(--glitch-hue-1))
      drop-shadow(-2px 3px 0 rgba(255, 0, 0, 0.1));
  }
  66.77%,
  74.90% {
    transform: translateX(var(--glitch-x-2));
    filter: hue-rotate(var(--glitch-hue-2))
      drop-shadow(-3px -2px 0 rgba(0, 0, 255, 0.1));
  }
}
@keyframes glitch-7 {
  0.00%,
  33.33%,
  40.48%,
  66.67%,
  73.81%,
  100.00% {
    transform: none;
    filter: hue-rotate(0) drop-shadow(0 0 0 transparent);
  }
  33.43%,
  40.38% {
    transform: translateX(var(--glitch-x-1));
    filter: hue-rotate(var(--glitch-hue-1))
      drop-shadow(0px -3px 0 rgba(0, 0, 255, 0.1));
  }
  66.77%,
  73.71% {
    transform: translateX(var(--glitch-x-2));
    filter: hue-rotate(var(--glitch-hue-2))
      drop-shadow(4px 1px 0 rgba(255, 0, 0, 0.1));
  }
}
@keyframes glitch-8 {
  0.00%,
  33.33%,
  39.58%,
  66.67%,
  72.92%,
  100.00% {
    transform: none;
    filter: hue-rotate(0) drop-shadow(0 0 0 transparent);
  }
  33.43%,
  39.48% {
    transform: translateX(var(--glitch-x-1));
    filter: hue-rotate(var(--glitch-hue-1))
      drop-shadow(-1px -1px 0 rgba(0, 0, 255, 0.1));
  }
  66.77%,
  72.82% {
    transform: translateX(var(--glitch-x-2));
    filter: hue-rotate(var(--glitch-hue-2))
      drop-shadow(3px -1px 0 rgba(0, 0, 255, 0.1));
  }
}
@keyframes glitch-9 {
  0.00%,
  33.33%,
  38.89%,
  66.67%,
  72.22%,
  100.00% {
    transform: none;
    filter: hue-rotate(0) drop-shadow(0 0 0 transparent);
  }
  33.43%,
  38.79% {
    transform: translateX(var(--glitch-x-1));
    filter: hue-rotate(var(--glitch-hue-1))
      drop-shadow(1px -3px 0 rgba(255, 0, 0, 0.1));
  }
  66.77%,
  72.12% {
    transform: translateX(var(--glitch-x-2));
    filter: hue-rotate(var(--glitch-hue-2))
      drop-shadow(1px 1px 0 rgba(255, 0, 0, 0.1));
  }
}
@keyframes glitch-10 {
  0.00%,
  33.33%,
  38.33%,
  66.67%,
  71.67%,
  100.00% {
    transform: none;
    filter: hue-rotate(0) drop-shadow(0 0 0 transparent);
  }
  33.43%,
  38.23% {
    transform: translateX(var(--glitch-x-1));
    filter: hue-rotate(var(--glitch-hue-1))
      drop-shadow(3px -1px 0 rgba(255, 0, 0, 0.1));
  }
  66.77%,
  71.57% {
    transform: translateX(var(--glitch-x-2));
    filter: hue-rotate(var(--glitch-hue-2))
      drop-shadow(-3px 2px 0 rgba(255, 0, 0, 0.1));
  }
}