.title {
  color: var(--dark);
  font-family: "IBM Plex Mono", monospace;
}

@media (max-width: 400px) {
  .title {
    font-size: 2rem;
  }
}

.char {
  text-transform: uppercase;
  animation: char 5s infinite;
}

@keyframes char {
  0%,
  10% {
    color: var(--dark);
  }
  5% {
    color: var(--light-mid);
  }
}

.subtitle {
  animation: subtitle 2s 1s both;
}

.subtitle .icon {
  position: relative;
  top: 0.15em;
  margin-right: 0.5em;
  color: var(--dark);
}

@keyframes subtitle {
  from {
    color: var(--light);
    opacity: 0;
  }
}

.cursor {
  animation: cursor 1s 2s infinite steps(1);
}

@keyframes cursor {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
}