body {
  background: linear-gradient(rgb(0, 0, 0), rgb(3, 4, 15));
  margin: 0;
}

#canvas {
  display: block;
  filter: blur(1px);
  z-index: 0;
}

#banner {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Vibur", sans-serif;
  color: #fff;
  animation: pulsate 1.5s infinite alternate;
  font-size: max(5vw, 57px);
  z-index: 1;
  font-weight: 400;
  text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #bc13fe,
    0 0 82px #bc13fe, 0 0 92px #bc13fe, 0 0 102px #bc13fe, 0 0 151px #bc13fe;
}

#timer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  color: #fff;
  font-size: max(5vw, 50px);

  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -ms-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;

  text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #bc13fe,
    0 0 82px #bc13fe, 0 0 92px #bc13fe, 0 0 102px #bc13fe, 0 0 151px #bc13fe;
  font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
  font-weight: 50%;
  animation: pulsate 1.5s infinite alternate;
  border: 0.2rem solid #fff;
  border-radius: 2rem;
  padding: 0.3em 0.8em 0.3em 0.8em;
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  z-index: 1;
  box-shadow: 0 0 0.2rem #fff, 0 0 0.2rem #fff, 0 0 2rem #5271ff,
    0 0 0.8rem #5271ff, 0 0 2.8rem #bc13fe, inset 0 0 1.3rem #bc13fe;
}

@keyframes pulsate {
  100% {
    text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #5271ff,
      0 0 80px #5271ff, 0 0 90px #5271ff, 0 0 100px #5271ff, 0 0 150px #5271ff;
  }

  0% {
    text-shadow: 0 0 2px #fff, 0 0 6px #fff, 0 0 10px #fff, 0 0 28px #5271ff,
      0 0 63px #5271ff, 0 0 70px #5271ff, 0 0 84px #5271ff, 0 0 130px #5271ff;
  }
}