:root {
   --main-bg-color: hsl(268, 73%, 10%);
   --text-glow-off-color: hsl(271, 65%, 16%);
   --text-glow-on-color: #fff;
   --text-glow-shadow-color: hsl(263, 62%, 63%);
}
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: Arial, Helvetica, sans-serif;
}
body {
   min-height: 100vh;
   background: var(--main-bg-color);
}
.hero-section {
    width: 100%;
    /* height: 100vh; */
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.hero-title {
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 15em 2em 10em;
}
.text-glow {
   position: relative;
   font-family: "Bebas Neue", Arial, Helvetica, sans-serif;
   font-size: 3.5em;
   letter-spacing: 0.15em;
   color: var(--text-glow-off-color);
   text-transform: uppercase;
   width: 100%;
   text-align: center;
   -webkit-box-reflect: below 1px linear-gradient(transparent, #0008);
   line-height: 0.6em;
   animation: glow-animation 8s ease-in-out;
   animation-fill-mode: forwards;
   animation-direction: alternate;
}
@keyframes glow-animation {
   0% {
      color: var(--text-glow-off-color);
      text-shadow: none;
   }
   100% {
      color: var(--text-glow-on-color);
      text-shadow: 0 0 10px var(--text-glow-shadow-color),
         0 0 0.1em var(--text-glow-shadow-color),
         0 0 0.4em var(--text-glow-shadow-color),
         0 0 0.8em var(--text-glow-shadow-color),
         0 0 1.67em var(--text-glow-shadow-color),
         0 0 3.3em var(--text-glow-shadow-color);
   }
}
.media-embed {
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
}

footer {
    color: hsl(0deg 0% 100% / 60%);
}

@media screen and (min-width: 768px) {
    .text-glow {
        font-size: 6em;
    }
}