body, div, h1, h2, html {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    line-height: 1.15;
}

body {
    font-family: 'Shadows Into Light', cursive;
    background-image: url(./images/bg.jpg);
    background-position: center center;
    background-repeat: repeat;
    margin: 0;
}

body:before {
    content: '';
    background: rgb(17,17,17);
    background: -moz-radial-gradient(circle, rgba(17,17,17,0.8991305995054272) 0%, rgba(17,17,17,1) 100%);
    background: -webkit-radial-gradient(circle, rgba(17,17,17,0.8991305995054272) 0%, rgba(17,17,17,1) 100%);
    background: radial-gradient(circle, rgba(17,17,17,0.8991305995054272) 0%, rgba(17,17,17,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#111111",endColorstr="#111111",GradientType=1);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.wrap{
    padding: 2rem;
    width: 100%;
    height: 100vh;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

h1,
h2 {
    color: #fff;
    text-align: center;
    z-index: 999;
}

h1 { 
    font-size: 3rem;
    border: 4px solid #ff6600;
    border-radius: 100%;
    padding: 3rem;
    animation: border-flicker 23s linear infinite; 
    transform: rotate(-5deg);
}

h1 span {
    animation: text-flicker 3s linear infinite;
}

h2 { 
    font-weight: 100; 
    margin-top: 4rem;
    color: rgba(255,255,255,.95)
}

span {display: inline;}

.teal {
    color: #08F7FE;
    text-shadow: 2px 2px 10px #08F7FE;
}
.green {
    color: #09FBD3;
    text-shadow: 2px 2px 10px #09FBD3;
}
.magenta {
    color: #FE53BB;
    text-shadow: 2px 2px 10px #FE53BB;
}
.yellow {
    color: #FCF340;
    text-shadow: 2px 2px 10px #FCF340;
}
.blue {
    color: #00ffff ;
    text-shadow: 2px 2px 10px #00ffff ;
}
.red {
    color: #ED0003;
    text-shadow: 2px 2px 10px #ED0003;
}
.purple {
    color: #6E0dd0;
    text-shadow: 2px 2px 10px #6E0dd0;
}
.letter-flicker {
    animation: letter-flicker 2s linear infinite;
}

@keyframes text-flicker {
    0% {
      opacity:0.1;
      text-shadow: 0px 0px 29px inherit;
    }
    
    2% {
      opacity:1;
      text-shadow: 0px 0px 29px inherit;
    }
    8% {
      opacity:0.1;
      text-shadow: 0px 0px 29px inherit;
    }
    9% {
      opacity:1;
      text-shadow: 0px 0px 29px inherit;
    }
    12% {
      opacity:0.1;
      text-shadow: 0px 0px inherit;
    }
    20% {
      opacity:1;
      text-shadow: 0px 0px 29px inherit;    }
    25% {
      opacity:0.3;
      text-shadow: 0px 0px 29px inherit;    }
    30% {
      opacity:1;
      text-shadow: 0px 0px 29px inherit;    }
    
    70% {
      opacity:0.7;
      text-shadow: 0px 0px 29px inherit;    }
    
    72% {
      opacity:0.2;
      text-shadow:0px 0px 29px inherit;    }
    
    77% {
      opacity:.9;
      text-shadow: 0px 0px 29px inherit;    }
    100% {
      opacity:.9;
      text-shadow: 0px 0px 29px inherit;    }
  }
  
  @keyframes border-flicker {
    0% {
      opacity:0.1;
      -webkit-box-shadow: 0px 0px 78px 4px rgba(255, 102, 0,0.73);
  -moz-box-shadow: 0px 0px 78px 4px rgba(255, 102, 0,0.73);
  box-shadow: 0px 0px 78px 4px rgba(255, 102, 0,0.73);
    }
    2% {
      opacity:1;
      -webkit-box-shadow: 0px 0px 78px 4px rgba(255, 102, 0,0.73);
  -moz-box-shadow: 0px 0px 78px 4px rgba(255, 102, 0,0.73);
  box-shadow: 0px 0px 78px 4px rgba(255, 102, 0,0.73);
    }
    4% {
      opacity:0.1;
      -webkit-box-shadow: 0px 0px 78px 4px rgba(255, 102, 0,0.73);
  -moz-box-shadow: 0px 0px 78px 4px rgba(255, 102, 0,0.73);
  box-shadow: 0px 0px 78px 4px rgba(255, 102, 0,0.73);
    }
    
    8% {
      opacity:1;
      -webkit-box-shadow: 0px 0px 78px 4px rgba(255, 102, 0,0.73);
  -moz-box-shadow: 0px 0px 78px 4px rgba(255, 102, 0,0.73);
  box-shadow: 0px 0px 78px 4px rgba(255, 102, 0,0.73);
    }
    70% {
      opacity:0.7;
      -webkit-box-shadow: 0px 0px 78px 4px rgba(255, 102, 0,0.73);
  -moz-box-shadow: 0px 0px 78px 4px rgba(255, 102, 0,0.73);
  box-shadow: 0px 0px 78px 4px rgba(255, 102, 0,0.73);
    }
    100% {
      opacity:1;
      -webkit-box-shadow: 0px 0px 78px 4px rgba(255, 102, 0,0.73);
  -moz-box-shadow: 0px 0px 78px 4px rgba(255, 102, 0,0.73);
  box-shadow: 0px 0px 78px 4px rgba(255, 102, 0,0.73);
    }
  }
  
  @keyframes letter-flicker {
    0% {
      opacity:0.1;
      text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
    }
    2% {
      opacity:0.1;
      text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
    }
    4% {
      opacity:1;
      text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
    }
    
    
    19% {
      opacity:1;
      text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
    }
    21% {
      opacity:0.1;
      text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
    }
    23% {
      opacity:1;
      text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
    }
    
    80% {
      opacity:1;
      text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
    }
    83% {
      opacity:0.4;
      text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
    }
    87% {
      opacity:1;
      text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
    }
  }