body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    overflow: hidden;
    position: relative;
  }

a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
  }

  h1 {
    font-size: 15em;
    text-align: center;
    font-family: 'Inter', sans-serif;
    z-index: 1;
    position: relative;
  }

  img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42em;
  height: 42em;
  
  z-index: 10;
  filter: blur(15px);
  
}

img:first-of-type {
  animation: rotate 20s linear infinite, fade 10s ease-in-out infinite, randomBlur 10s linear infinite;
}

img:last-of-type {
	transform: translate(-50%, -50%);
  animation: rotateCounter 15s linear infinite,  randomBlur 13s linear infinite;
}

/* Keyframes for rotating clockwise */
@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Keyframes for rotating counterclockwise */
@keyframes rotateCounter {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes fade {
  0%, 100% {
    opacity: 0.94;
  }
  50% {
    opacity: 1;
  }
}

@keyframes randomBlur {
    0% {
      filter: blur(7px);
    }
    25% {
      filter: blur(15px);
    }
    50% {
      filter: blur(20px);
    }
    75% {
      filter: blur(10px);
    }
    100% {
      filter: blur(7px);
    }
  }