@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400);

canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80dvh;
  z-index: -1;
  color: transparent;
}

.title-text {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  color: white;
}
.title-text-char {
  animation: title-text 2.5s infinite ease-out alternate;
}
.title-text-char:nth-child(1) {
  animation-delay: 1s;
}
.title-text-char:nth-child(2) {
  animation-delay: 1.1s;
}
.title-text-char:nth-child(3) {
  animation-delay: 1.2s;
}
.title-text-char:nth-child(4) {
  animation-delay: 1.3s;
}
.title-text-char:nth-child(5) {
  animation-delay: 1.4s;
}
.title-text-char:nth-child(6) {
  animation-delay: 1.5s;
}
.title-text-char:nth-child(7) {
  animation-delay: 1.6s;
}
.title-text-char:nth-child(8) {
  animation-delay: 1.7s;
}
.title-text-char:nth-child(9) {
  animation-delay: 1.8s;
}
.title-text-char:nth-child(10) {
  animation-delay: 1.9s;
}
.title-text-char:nth-child(11) {
  animation-delay: 2s;
}
.title-text-char:nth-child(12) {
  animation-delay: 2.1s;
}
.title-text-char:nth-child(13) {
  animation-delay: 2.2s;
}
.title-text-char:nth-child(14) {
  animation-delay: 2.3s;
}
.title-text-char:nth-child(15) {
  animation-delay: 2.4s;
}
@keyframes title-text {
  0% {
    filter: blur(0px);
  }
  100% {
    filter: blur(4px);
  }
  50% {
    filter: blur(0px);
  }
}