@import url('https://fonts.googleapis.com/css?family=Amatic+SC:700&display=swap');

html {
  height: 100vh;
  background: black;
}
body { height: 100%; }
main {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}


/**** Shining text ****/
@keyframes shining {
  from { background-position: 200% 50%; }
  to { background-position: -200% 50%; }
}
.shining-text {
  position: relative;
  font-family: 'Amatic SC', cursive;
  font-size: 60px;
  color: white;
}
.shining-text::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,1) 100%);
  background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0)  30%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 100%);
  background: radial-gradient(ellipse at center,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 30%,rgba(0,0,0,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=1 );
  
  background-repeat: repeat-x;
  background-size: 200% 200%;
  
  -webkit-animation-name: shining; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 12s; /* Safari 4.0 - 8.0 */
  animation-name: shining;
  animation-duration: 12s;
  animation-delay: 0;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

}