/* ===== PAGE ===== */
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  background: black;
  font-family: Arial, sans-serif;
}

/* ===== CENTERED MAIN GIF ===== */
/* (this styles the <img src="background1.gif"> element) */
.center-gif {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 1000px;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* ===== CLICKABLE HOVER HOTSPOT ===== */
.hotspot {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: block;
}

.hover-img {
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hotspot:hover .hover-img {
  opacity: 1;
}