/* PAGE STYLES */
html,
body {
  display: block;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 50px;
}

#screen {
  height: 100vh;
}

#screen:after {
  animation: grain 8s steps(10) infinite;
  background-image: url(../img/noise.png);
  content: "";
  height: 300%;
  left: -50%;
  opacity: 0.3;
  position: fixed;
  top: -110%;
  width: 300%;
}

.scanline {
  width: 100%;
  height: 100px;
  z-index: 8;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.2) 10%, rgba(0, 0, 0, 0.1) 100%);
  opacity: 0.1;
  position: absolute;
  bottom: 100%;
  animation: scanline 10s linear infinite;
}

.content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Change Theme */
.themes {
  position: absolute;
  top: 0;
  left: 0;
}

.themes ul li {
  display: inline-block;
  color: white;
}

.themes ul li a {
  color: white;
}

/* https://css-tricks.com/snippets/css/animated-grainy-texture/ */
@keyframes grain {

  0%,
  100% {
    transform: translate(0, 0);
  }

  10% {
    transform: translate(-5%, -10%);
  }

  20% {
    transform: translate(-15%, 5%);
  }

  30% {
    transform: translate(7%, -25%);
  }

  40% {
    transform: translate(-5%, 25%);
  }

  50% {
    transform: translate(-15%, 10%);
  }

  60% {
    transform: translate(15%, 0%);
  }

  70% {
    transform: translate(0%, 15%);
  }

  80% {
    transform: translate(3%, 35%);
  }

  90% {
    transform: translate(-10%, 10%);
  }
}

/* https://dev.to/ekeijl/retro-crt-terminal-screen-in-css-js-4afh */
@keyframes scanline {
  0% {
    bottom: 100%;
  }

  80% {
    bottom: 100%;
  }

  100% {
    bottom: 0%;
  }
}