html,
body {
  background-color: black;
  font-family: "Matrix", "Courier New", Courier, monospace;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  padding: 0;
  width: 100vw;
}

.traceline {
  display: inline-block;
  height: 100vh;
  position: absolute;
  width: 0;
  will-change: transform;
}

.tracer {
  animation-fill-mode: forwards;
  animation-name: rain;
  animation-timing-function: linear;
  color: white;
  display: inline-block;
  height: 0;
  position: absolute;
  text-shadow: 0 0 4px white, 0 0 8px white, 0 0 12px white;
  width: 0;
}

.tracer::after {
  content: attr(data-content);
  display: inline-block;
}

.char {
  animation-fill-mode: forwards;
  animation-name: fadeout;
  animation-timing-function: linear;
  display: inline-block;
  position: absolute;
}

/*
  font
*/

@font-face {
  font-family: "Matrix";
  src: url("fonts/matrix_code_nfi.ttf"),
    url("fonts/matrix_code_nfi.otf") format("opentype");
}

/*
  rain (top to bottom)
*/

@keyframes rain {
  from {
    top: -10%;
  }

  to {
    top: 105%;
  }
}

/*
  char fade
*/

@keyframes fadeout {
  0% {
    color: white;
    text-shadow: 0 0 4px white;
  }

  10% {
    color: #72fd73;
    text-shadow: 0 0 4px #72fd73;
  }

  to {
    color: black;
    text-shadow: 0 0 4px black;
  }
}