/* author: https://codepen.io/PraRoz/pen/OJzrmmm
Rozan Chitrakar
Updated by TopPhoneApp team for customized styling */

@import url("https://fonts.googleapis.com/css2?family=Monoton&display=swap");

/* Background and font setup */
body {
  background-color: rgb(248, 245, 247); /* Logo-inspired background */
  overflow: hidden;
}

div {
  margin-top: 90px;
  padding: 40px;
  font-size: 95px;
  font-family: "Monoton", cursive;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 80px rgb(210, 50, 70), 0 0 30px rgb(255, 105, 120),
    0 0 6px rgb(160, 0, 20); /* Logo red gradient */
  color: rgb(210, 50, 70); /* Logo dominant red */
}

div p {
  margin: 5px;
}

#error:hover {
  text-shadow: 0 0 200px rgb(255, 255, 255), 0 0 80px rgb(120, 200, 120),
    0 0 6px rgb(50, 150, 255); /* Hover - Green and blue inspired */
}

#code:hover {
  text-shadow: 0 0 100px rgb(210, 50, 70), 0 0 40px rgb(255, 105, 120),
    0 0 8px rgb(160, 0, 20); /* Hover - Enhanced red tone */
}

#error {
  color: #ffffff;
  text-shadow: 0 0 80px rgb(255, 255, 255), 0 0 30px rgb(120, 200, 120),
    0 0 6px rgb(50, 150, 255); /* Logo alternate colors */
}

#error span {
  animation: upper 6s linear infinite;
}

#code span:nth-of-type(2) {
  animation: lower 9s linear infinite;
}

#code span:nth-of-type(1) {
  text-shadow: none;
  opacity: 0.4;
}

/* Animations for upper and lower text */
@keyframes upper {
  0%,
  19.999%,
  22%,
  62.999%,
  64%,
  64.999%,
  70%,
  100% {
    opacity: 0.99;
    text-shadow: 0 0 80px rgb(255, 255, 255), 0 0 30px rgb(120, 200, 120),
      0 0 6px rgb(50, 150, 255); /* Logo alternate colors */
  }
  20%,
  21.999%,
  63%,
  63.999%,
  65%,
  69.999% {
    opacity: 0.4;
    text-shadow: none;
  }
}

@keyframes lower {
  0%,
  12%,
  18.999%,
  23%,
  31.999%,
  37%,
  44.999%,
  46%,
  49.999%,
  51%,
  58.999%,
  61%,
  68.999%,
  71%,
  85.999%,
  96%,
  100% {
    opacity: 0.99;
    text-shadow: 0 0 80px rgb(210, 50, 70), 0 0 30px rgb(255, 105, 120),
      0 0 6px rgb(160, 0, 20); /* Logo-inspired red gradient */
  }
  19%,
  22.99%,
  32%,
  36.999%,
  45%,
  45.999%,
  50%,
  50.99%,
  59%,
  60.999%,
  69%,
  70.999%,
  86%,
  95.999% {
    opacity: 0.4;
    text-shadow: none;
  }
}