body {
  background: #161517;
}
.container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-flow: column;
  height: 80vh;
  margin: 3vh 20%;
  font-family: Arial;
}
h1 {
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 100px;
  filter: brightness(200%);
}
h1::before {
  content: 'counter';
  position: absolute;
  mix-blend-mode: difference;
  filter: blur(3px);
}
h2 {
  font-size: 90px;
}

.red {
  color: #fff;
  text-align: center;
  animation: red 1.5s ease-in-out infinite alternate;
}

@-webkit-keyframes red {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073,
      0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }

  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6,
      0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}

.green {
  color: #fff;
  text-align: center;
  animation: green 1.5s ease-in-out infinite alternate;
}

@-webkit-keyframes green {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #51b822,
      0 0 40px #51b822, 0 0 50px #51b822, 0 0 60px #51b822, 0 0 70px #51b822;
  }

  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #78e445, 0 0 40px #78e445,
      0 0 50px #78e445, 0 0 60px #78e445, 0 0 70px #78e445, 0 0 80px #78e445;
  }
}

.white {
  color: #fff;
  text-align: center;
  animation: white 1.5s ease-in-out infinite alternate;
}

@-webkit-keyframes white {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #aaa, 0 0 40px #aaa,
      0 0 50px #aaa, 0 0 60px #aaa, 0 0 70px #aaa;
  }

  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #999, 0 0 40px #999, 0 0 50px #999,
      0 0 60px #999, 0 0 70px #999, 0 0 80px #999;
  }
}

.btn {
  display: inline-block;
  color: white;
  background: #161517;
  font-size: larger;
  text-transform: uppercase;
  padding: 15px 20px;
  margin: 5vh 10px;
  border: 2px solid #fff;
  border-radius: 25px;
  box-shadow: 0px 0px 10px 0px #fff;
  cursor: pointer;
  outline: none;
}

.btn:hover {
  box-shadow: 0px 0px 20px 0px #fff;
}

@media screen and (max-width: 756px) {
  .container {
    margin: 5px;
  }
  h1 {
    font-size: 15vw;
  }
  h2 {
    font-size: 14vw;
    margin: 5vw 0;
  }
  .btn {
    font-size: 3.8vw;
    margin: 8vh 3px;
    padding: 10px 15px;
  }
}