/* Source: https://codepen.io/iceable/pen/yLBrZOd */

body {
  background-color: #111111;
  margin: 0;
  overflow-x: hidden;
}

.bg {
  position: fixed;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  width: 200%;
  height: 200vh;
  background: transparent url('/img/noise-transparent.png') repeat 0 0;
  background-repeat: repeat;
  animation: bg-animation .2s infinite;
  opacity: .9;
  visibility: visible;
  z-index: -1;
}

@keyframes bg-animation {
    0% { transform: translate(0,0) }
    10% { transform: translate(-5%,-5%) }
    20% { transform: translate(-10%,5%) }
    30% { transform: translate(5%,-10%) }
    40% { transform: translate(-5%,15%) }
    50% { transform: translate(-10%,5%) }
    60% { transform: translate(15%,0) }
    70% { transform: translate(0,10%) }
    80% { transform: translate(-15%,0) }
    90% { transform: translate(10%,5%) }
    100% { transform: translate(5%,0) }
}

h1 {
  text-align: center;
  vertical-align: center;
  color: #4AF626;
  font-family: 'Courier New', Courier, monospace;
  font-size: 10vw;
}

h2, a {
  color: #4AF626;
  font-family: 'Courier New', Courier, monospace;
}

blink {
  animation: blinker 1.0s step-start infinite;
}

@keyframes blinker {
   50% { opacity: 0; }
}

.socials {
  display: block;
  text-align: center;
}

.social-container {
  width: 10vw;
  padding: 2vw;
  display: inline-block;
}

.text {
  color: white;
  font-family: 'Courier New', Courier, monospace;
}

.content-container {
  padding: 2vw;
}

.fa {
  width: 10vw;
  text-align: center;
  text-decoration: none;
  font-size: 4vw !important;
  color: #4AF626;
}

.fa:hover {
  opacity: 0.7;
}

@media (orientation: portrait) {
  
  .social-container {
    width: 100%;
  }
  
  .fa {
    padding: 4vw;
    font-size: 8vw !important;
  }
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 98%;
  text-align: right;
}