@import url("https://fonts.googleapis.com/css2?family=Albert+Sans&display=swap");
html,
body {
  font-family: "Albert Sans", sans-serif;
  background-color: #e5e5e5;
  height: 99%;
}

.noise {
  width: 100%;
  height: 100%;
  background: linear-gradient(-90deg, black, transparent),
    url(https://grainy-gradients.vercel.app/noise.svg);
  filter: contrast(180%) brightness(60000%);
}

.noise:hover {
  width: 100%;
  height: 100%;
  animation-name: change;
  animation-duration: 10s;
  animation-iteration-count: 10;
}

@keyframes change {
  0% {
    background: linear-gradient(-90deg, black, transparent),
      url(https://grainy-gradients.vercel.app/noise.svg);
    filter: contrast(180%) brightness(60000%);
  }
  15% {
    background: linear-gradient(-90deg, black, transparent),
      url(https://grainy-gradients.vercel.app/noise.svg);
    filter: contrast(165%) brightness(30000%);
  }
  30% {
    background: linear-gradient(-90deg, black, transparent),
      url(https://grainy-gradients.vercel.app/noise.svg);
    filter: contrast(170%) brightness(50000%);
  }
  45% {
    background: linear-gradient(-90deg, black, transparent),
      url(https://grainy-gradients.vercel.app/noise.svg);
    filter: contrast(180%) brightness(60000%);
  }
  60% {
    background: linear-gradient(-90deg, black, transparent),
      url(https://grainy-gradients.vercel.app/noise.svg);
    filter: contrast(190%) brightness(70000%);
  }
  86% {
    background: linear-gradient(-90deg, black, transparent),
      url(https://grainy-gradients.vercel.app/noise.svg);
    filter: contrast(190%) brightness(70000%);
  }
}