@keyframes name-fade {
  from {
    color: white;
  } 50% {
    color: #66c2ff;
  } to {
    color: white;
  }
}

@keyframes name-color {
  from {
    color: white;
  } to {
    color: #66c2ff;
  }
}

/* This is a animation from codepen, you can find it here
  Link: https://codepen.io/jayhollywood/pen/JWPPZp
*/
@keyframes mouse-wheel {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  10% {
    transform: translateY(0);
    opacity: 1;
  }
  30% {
    transform: translateY(0);
    height: 4px;
  }
  50% {
    transform: translateY(0);
    height: 20px;
  }
  70% {
    transform: translateY(15px);
    height: 4px;
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  100% {
    transform: translateY(15px);
    opacity: 0;
  }
}

/* Servers */

@keyframes online {
  0% {
    color: #ffff99;
  } 20% {
    color: #66ff66;
  } 30% {
    color: #ffff99;
  } 35% {
    color: #66ff66;
  } 37% {
    color: #ffff99;
  } 40% {
    color: #66ff66;
  } 50% {
    color: #ffff99;
  } 52% {
    color: #66ff66;
  } 55% {
    color: #ffff99;
  } 60% {
    color: #66ff66;
  } 65% {
    color: #ffff99;
  } 67% {
    color: #66ff66;
  } 85% {
    color: #ffff99;
  } 87% {
    color: #66ff66;
  } 90% {
    color: #ffff99;
  } 93% {
    color: #66ff66;
  } 95% {
    color: #ffff99;
  } 97% {
    color: #66ff66;
  } 100% {
    color: #66ff66;
  }
}