body {
  background: rgb(168, 197, 169);
  background: linear-gradient(
    0deg,
    rgba(168, 197, 169, 1) 0%,
    rgba(135, 200, 192, 1) 48%,
    rgba(61, 153, 192, 1) 100%
  );
  overflow: hidden;
}

.wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}

.hud {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  font-family: handjet;
  margin-bottom: 200px;
}

.lines {
  position: absolute;
  top: -300px;
  color: var(--black);
  filter: blur(1px);
  font-variation-settings: "wght" 400, "ELGR" 1, "ELSH" 7;
  font-size: 140rem;
  animation: hud-animation 3s alternate infinite ease-in-out;
  transform-origin: bottom;
}

@keyframes hud-animation {
  0% {
    -webkit-text-stroke: 1px var(--black);
    -webkit-text-fill-color: transparent;
  }
  100% {
    font-variation-settings: "wght" 1, "ELGR" 1, "ELSH" 3;
    transform: translateX(-13px);
  }
}

.cross {
  position: absolute;
  top: 438px;
  z-index: 9999;
  color: var(--black);
  filter: blur(1px);
  font-variation-settings: "wght" 1, "ELGR" 1, "ELSH" 3;
  font-size: 12rem;
}

#myVideo {
  position: absolute;
  z-index: -999;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  filter: saturate(0%);
  mix-blend-mode: screen;
}