* {
  margin: 0px;
  padding: 0px;
}

@font-face {
  font-family: "shake";
  src: url("KGShakeitOff.ttf");
}

body {
  font-family: "shake";
  color: black;
  background-color: #ebe7e7;
  text-align: center;
}

#unavailable-msg {
  margin-top: 15vh;
  font-size: calc(1rem + 1vw);
  transition: all 1s ease;
}

a {
  color: black;
  font-size: 1rem;
}

svg {
  display: block;
  margin: auto;
  width: 256px;
  height: 256px;
}

/* SMOKE */
#smoke-1 {
  stroke-dasharray: 0, 10;
  animation: smoke 6s ease infinite;
}

#smoke-2 {
  stroke-dasharray: 0, 10;
  animation: smoke 6s 0.5s ease infinite;
}

@keyframes smoke {
  0% {
    stroke-dasharray: 0, 10;
  }
  50% {
    stroke-dasharray: 10, 0;
  }
  100% {
    stroke-dasharray: 10, 0;
    opacity: 0;
  }
}

/* WRITING */
#line-1 {
  opacity: 0;
  animation: writing 0.5s linear forwards;
}

#line-2 {
  opacity: 0;
  animation: writing 0.5s 1s linear forwards;
}

#line-3 {
  opacity: 0;
  animation: writing 0.5s 1.5s linear forwards;
}

#line-4 {
  opacity: 0;
  animation: writing 0.5s 2s linear forwards;
}

@keyframes writing {
  0% {
    width: 0px;
    opacity: 1;
  }
  100% {
    width: 14px;
    opacity: 1;
  }
}