@font-face {
  font-family: pix; /* set name */
  src: url(/Pix32.ttf); /* url of the font */
}
@font-face {
  font-family: out; /* set name */
  src: url(/Pixelout.ttf); /* url of the font */
}

body {
  background-color: black;
  color: white;
  font-family: 'pix';
  filter: grayscale(80%);
  overflow: hidden;
}

h1, h2{
  font-family: 'out';
  font-weight: 100;
}

h1 {
  font-size: 4rem; 
  margin: 0;
  margin-top: 10px
}
button {
  font-family: 'pix';
  border: none;
  height: 60px;
  width: 150px;
  background: url(/img/buttonw.png);
  background-size: 150px 60px;
  color: black;
}

button:hover {
  background: url(/img/buttonr.png);
  background-size: 150px 60px;
  color: white;
  cursor: pointer;
}

a {
  color: red;
}



.page-header {
  height: 400vh;
  background-size:cover;
}

.noise-effect:after {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://i.imgur.com/WiKKBSw.jpg);
  content: "";
  height: 300%;
  left: -50%;
  opacity: 0.12;
  position: fixed;
  top: -110%;
  pointer-events: none;
  width: 300%;
}

@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%) }
}