.bg {
  width: 100vw;
  height: 100vh;
  position: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}

.bg:after {
  animation: grain 2s steps(6) infinite;
  background-image: url("/img/noise.png");
  background-size: 150px 150px;
  background-repeat: repeat;
  position: fixed;
  content: "";
  width: 300%;
  height: 300%;
  top: -100%;
  left: -50%;
  opacity: 0.6;
}

@keyframes grain {
  0%,
  100% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(-5%, -10%);
  }
  30% {
    transform: translate(3%, -15%);
  }
  50% {
    transform: translate(12%, 9%);
  }
  70% {
    transform: translate(9%, 4%);
  }
  90% {
    transform: translate(-1%, 7%);
  }
}

.bg-shaded {
  background-color: rgba(0, 0, 0, 0.6);
  background-size: cover;
}