* {
  margin: 0;
  padding: 0;
}
body {
  align-items: center;
  background-color: black;
  display: flex;
  height: 100vh;
  justify-content: center;
  overflow: hidden;
  width: 100vw;
}
#bgimg {
  animation-duration: 3.5s;
  animation-name: goat;
  aspect-ratio: auto;
  opacity: 0;
  width: 100%;
}
@media (min-width: 1100px) {
  #bgimg {
    height: auto;
    width: 1048px;
  }
}
@keyframes goat {
  0%,
  2%,
  4%,
  6%,
  10%,
  13%,
  18%,
  20% {
    filter: blur(0px);
    opacity: 0;
  }
  1%,
  3%,
  5%,
  14%,
  21% {
    opacity: 0.8;
  }
  50%,
  59% {
    filter: blur(0px);
    opacity: 1;
    scale: 1;
  }
  80% {
    filter: blur(50px);
    opacity: 1;
    scale: 6;
  }
  83% {
    filter: invert(0);
  }
  100% {
    filter: invert(1);
    opacity: 0;
    scale: 6;
  }
}