body {
margin: 0;
}

.megadiv {
  position: fixed;
  inset: 0;
  background: url("img/noise.svg");
  opacity: 1;
  z-index: 1;
}

filter {
  /* mix-blend-mode: overlay; */
  width: 11rem;
}

img {
  /* display: block; */
  max-width:100%;
  transform: rotate(var(--img-rotation, 0deg));
  filter: blur(0.02em) grayscale(10%);
  opacity: 1;
  z-index: 0;
}

img:hover {
  filter: grayscale(0%);
  transform: rotate(calc(var(--img-rotation, 0deg) + 10deg));
}

img::before {

}


.object {
    position: absolute;
     width: 11rem;
     background: none;
}

.image {
  background: none;
}


.overlay {
  opacity: 0;
}

.object:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-family: serif;
  font-size: 2rem;
  position: fixed;
  width:100%;
  top: 90%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
  text-transform: lowercase;
}

.text p {
  display: inline-flex;
    background-color: blue;
}

footer {
  z-index: 1;
  position: fixed;
  width:100%;
  bottom: 0;
  text-align: center;
}

footer p {
  color: black;
  font-size: 0.7rem;
  font-family: monospace;

}

a {
  text-decoration: none;
  color: blue;
}


@media only screen and (max-width: 600px) {

  .object {
      position: absolute;
       width: 9rem;
  }

  footer {
    font-size: 0.8rem;
    margin: 0;
    background-color: white;
    width: 100%;
  }

}