body { background: #fafafa; padding: 0; margin: 0; overflow: hidden; cursor: none;}

.overlay { position: absolute; top: 0; left: 0; height: 100vh; width: 100vw; user-select: none; position: relative; }

.overlay .hero-text { color: #fff; font-size: 10vw; font-weight: 200; justify-content: center; align-items: center; display: flex; position: absolute; top: 0; left: 0; z-index: 99; height: 100vh; width: 100vw; }

.container { padding: 1rem; }

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

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

.grain { position: fixed; animation: grainAnimation 1s steps(4) infinite; background-image: url(../assets/grain.png); height: 180%; left: -40%; top: -40%; width: 180%; z-index: 46; }