:root {
  --color-one: #5e9b94;
  --color-two: #43beb0;
  --color-three: #0a1414;
  --color-four: #5ea0ac;
  font-family: 'Roboto', sans-serif;
}

canvas {
  display: absolute;

  z-index: -1;
}

body {
  overflow: hidden;
  background-color: black;
  /* background-color: var(--color-three); */
  color: var(--color-four);
  text-align: center;
}

.flex-container {
  position: absolute;
  z-index: 0;
  width: 100%;
  /* left: 0px; */
  top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

h1 {
  color: var(--color-four);
}

p {
  font-family: verdana;
  font-size: 16px;
}


video {
  width: 90% !important;
  max-width: 600px;
  height: auto !important;
  max-height: 80vh !important;
}

.glitch {
  font-size: 2rem;
  font-weight: bold;
  text-transform: uppercase;
  position: relative;
  text-shadow: 0.05em 0 0 var(--color-one), -0.03em -0.04em 0 var(--color-two),
    0.025em 0.04em 0 var(--color-three);
  animation: glitch 800ms infinite;
}

.glitch span {
  position: absolute;
  top: 0;
  left: 0;
}

.glitch span:first-child {
  animation: glitch 800ms infinite;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  transform: translate(-0.04em, -0.03em);
  opacity: 0.75;
}

.glitch span:last-child {
  animation: glitch 500ms infinite;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  transform: translate(0.04em, 0.03em);
  opacity: 0.75;
}

@keyframes glitch {
  0% {
    text-shadow: 0.05em 0 0 var(--color-one), -0.03em -0.04em 0 var(--color-two),
      0.025em 0.04em 0 var(--color-three);
  }
  15% {
    text-shadow: 0.05em 0 0 var(--color-one), -0.03em -0.04em 0 var(--color-two),
      0.025em 0.04em 0 var(--color-three);
  }
  16% {
    text-shadow: -0.05em -0.025em 0 var(--color-one), 0.025em 0.035em 0 var(--color-two),
      -0.05em -0.05em 0 var(--color-three);
  }
  49% {
    text-shadow: -0.05em -0.025em 0 var(--color-one), 0.025em 0.035em 0 var(--color-two),
      -0.05em -0.05em 0 var(--color-three);
  }
  50% {
    text-shadow: 0.05em 0.035em 0 var(--color-one), 0.03em 0 0 var(--color-two),
      0 -0.04em 0 var(--color-three);
  }
  99% {
    text-shadow: 0.05em 0.035em 0 var(--color-one), 0.03em 0 0 var(--color-two),
      0 -0.04em 0 var(--color-three);
  }
  100% {
    text-shadow: -0.05em 0 0 var(--color-one), -0.025em -0.04em 0 var(--color-two),
      -0.04em -0.025em 0 var(--color-three);
  }
}


.grid-container {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.grid-container:after { 
  -webkit-mask-image: -webkit-gradient(linear, left 90%, left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
  mask-image: gradient(linear, left 90%, left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
	transform: perspective(200px) rotateX(40deg) scale(2,1) translateZ(0);
  content: ""; display: block; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 100vh;
  padding: 1px; 
  -webkit-background-clip: content-box; 
  -webkit-backface-visibility: hidden;
  outline: 1px solid transparent;
  transform-origin: bottom center;
  will-change: transform; 
}

.grid-container:after {
  background-position: center bottom;
  background-size: 40px 40px;
  background-image: 
  linear-gradient(to right, var(--color-one) 3px, transparent 2px), 
  linear-gradient(to bottom, var(--color-one) 2px, transparent 2px);
}