@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300&display=swap');

html, body{
  overflow: hidden;
}

body{
  --glowMaxSize: 20px;
  --glowMinSize: 8px;
  --anim: 6s ease-in-out infinite alternate;
  background-color: black;
  color: white;
  text-align: center;
  font-family:'Be Vietnam Pro', sans-serif;
  position: relative;
  height: 100vh;
}

@keyframes glow{
  from {
    color: rgba( 255, 255, 255, 1.0 );
    text-shadow: 0px 0px var( --glowMaxSize ) white;
  }
  to {
    color: rgba( 220, 220, 220, 1.0 );
    text-shadow: 0px 0px var( --glowMinSize ) white;
  }
}

h1{
  display: inline-block;
  color: rgba( 255, 255, 255, 1.0 );
  margin-top: 20vh;
  text-shadow: 0px 0px var( --glowMaxSize ) white;
  animation: glow var( --anim );
  position: relative;
  font-size: min( 6vw, 2rem );
}

@keyframes irradiance{
  from { background-color: rgba( 255, 255, 255, 1.0 ) }
  to { background-color: rgba( 255, 255, 255, 0.3 ) }
}

h1:after{
  content: '';
  position: absolute;
  top: 2.0em;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  transform: perspective( 8em ) rotateX( 70deg ) scale( 1.0, 1.5 );
  filter: blur( 1em );
  animation: irradiance var( --anim );
}