html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1200px;
  background: black;
}

body::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(-45deg, #ff0000, #ff9900, #33ff00, #0099ff, #9900ff, #ff0099);
  background-size: 1200% 1200%;
  animation: rainbowFlow 30s linear infinite;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: -1;
}

body.rainbow::before {
  opacity: 1;
}

#Image {
  width: clamp(250px, 30vw, 400px);
  height: auto;
  object-fit: contain;
  will-change: transform;
  transition: transform 0.1s ease-out;
  filter: drop-shadow(0 15px 25px rgba(0,0,0,0.25));
  cursor: pointer;
}

@keyframes rainbowFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}