/* Простейший сброс */
* {
  margin: 0;
  padding: 0;
}

body {
  background: #262626;
  /* Содержимое body по центру (кроме абсолютно позиционированных элементов) */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Стили и порядок анимации */
h1 {
  color: #fff;
  font-family: Segoe Print;

  /* функция clamp() введена в CSS в 2020 */
  /* font-size: clamp(20px, calc(30px + (48 - 30) * ((100vw - 300px) / (1600 - 300))), 60px); */

  /* Альтернатива: */

  /* Для экранов с шириной от 300px до 1600px используем эту формулу: */
  @media (min-width: 300px) and (max-width: 1600px) {
    font-size: calc(30px + (48 - 30) * ((100vw - 300px) / (1600 - 300)));
  }

  /* Если экран меньше 300px и больше 1600px, устанавливаем нужный шрифт медиазапросами: */

  /* Альтернативно для экранов шириной меньше 300px */
  @media (max-width: 300px) {
    font-size: 20px;
  }

  /* Альтернативно для экранов шириной больше 1600px */
  @media (min-width: 1600px) {
    font-size: 48px;
  }

  -webkit-animation: luce-1 1s infinite;
  animation: luce-1 1s infinite;
}

h1 span:nth-child(2n + 1) {
  -webkit-animation: luce-2 1s infinite;
  animation: luce-2 1s infinite;
}

h1 span:nth-child(4n + 2) {
  -webkit-animation: luce-3 1s infinite;
  animation: luce-3 1s infinite;
}

h1 span:nth-child(4n + 1) {
  -webkit-animation: luce-4 1s infinite;
  animation: luce-4 1s infinite;
}

/* Ключевые кадры */
@-webkit-keyframes luce-1 {

  0%,
  100% {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #49ff18,
      0 0 30px #49ff18, 0 0 40px #49ff18, 0 0 55px #49ff18, 0 0 75px #49ff18;
  }

  50% {
    text-shadow: none;
  }
}

@keyframes luce-1 {

  0%,
  100% {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #49ff18,
      0 0 30px #49ff18, 0 0 40px #49ff18, 0 0 55px #49ff18, 0 0 75px #49ff18;
  }

  50% {
    text-shadow: none;
  }
}

@-webkit-keyframes luce-2 {

  0%,
  100% {
    text-shadow: none;
  }

  50% {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ed1111,
      0 0 30px #ed1111, 0 0 40px #ed1111, 0 0 55px #ed1111, 0 0 75px #ed1111;
  }
}

@keyframes luce-2 {

  0%,
  100% {
    text-shadow: none;
  }

  50% {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ed1111,
      0 0 30px #ed1111, 0 0 40px #ed1111, 0 0 55px #ed1111, 0 0 75px #ed1111;
  }
}

@-webkit-keyframes luce-3 {

  0%,
  100% {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #11b2ed,
      0 0 30px #11b2ed, 0 0 40px #11b2ed, 0 0 55px #11b2ed, 0 0 75px #11b2ed;
  }

  50% {
    text-shadow: none;
  }
}

@keyframes luce-3 {

  0%,
  100% {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #11b2ed,
      0 0 30px #11b2ed, 0 0 40px #11b2ed, 0 0 55px #11b2ed, 0 0 75px #11b2ed;
  }

  50% {
    text-shadow: none;
  }
}

@-webkit-keyframes luce-4 {

  0%,
  100% {
    text-shadow: none;
  }

  50% {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #c5ed11,
      0 0 30px #c5ed11, 0 0 40px #c5ed11, 0 0 55px #c5ed11, 0 0 75px #c5ed11;
  }
}

@keyframes luce-4 {

  0%,
  100% {
    text-shadow: none;
  }

  50% {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #c5ed11,
      0 0 30px #c5ed11, 0 0 40px #c5ed11, 0 0 55px #c5ed11, 0 0 75px #c5ed11;
  }
}

.btn-home {
  display: block;
  position: absolute;
  top: -32px;
  right: 20px;
  width: 32px;
  height: 32px;
  color: #d6d6d6;
  transition: color 0.3s ease;
  animation: slide-bottom 1s ease-in 0.5s both;
}

.btn-home:hover {
  color: #fff;
}

.icon {
  width: 100%;
  height: 100%;
}

@keyframes slide-bottom {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(52px);
  }
}