/* ================================
   Easy settings
   ================================ */

:root {
  --image-width: 750px;

  /* Hotspot 1: left star */
  --hotspot-1-left: 4.35%;
  --hotspot-1-top: 9.10%;
  --hotspot-1-width: 6%;
  --hotspot-1-height: 6%;

  /* Hotspot 2: upper-left star */
  --hotspot-2-left: 25.85%;
  --hotspot-2-top: 1.60%;
  --hotspot-2-width: 6%;
  --hotspot-2-height: 6%;

  /* Hotspot 3: upper-right star */
  --hotspot-3-left: 69.35%;
  --hotspot-3-top: 1.60%;
  --hotspot-3-width: 6%;
  --hotspot-3-height: 6%;

  /* Hotspot 4: right star */
  --hotspot-4-left: 89.85%;
  --hotspot-4-top: 9.10%;
  --hotspot-4-width: 6%;
  --hotspot-4-height: 6%;
  
  /* Hotspot 5: sun */
  --hotspot-5-left: 35%;
  --hotspot-5-top: 30%;
  --hotspot-5-width: 30%;
  --hotspot-5-height: 26%;
}

/* ================================
   Page layout
   ================================ */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
}

.stage {
  position: relative;
  width: min(var(--image-width), 95vw);
}

.main-image {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
}

.hotspot {
  position: absolute;
  display: block;
  opacity: 0;
  background: transparent;
  cursor: pointer;
}

.hotspot-1 {
  left: var(--hotspot-1-left);
  top: var(--hotspot-1-top);
  width: var(--hotspot-1-width);
  height: var(--hotspot-1-height);
}

.hotspot-2 {
  left: var(--hotspot-2-left);
  top: var(--hotspot-2-top);
  width: var(--hotspot-2-width);
  height: var(--hotspot-2-height);
}

.hotspot-3 {
  left: var(--hotspot-3-left);
  top: var(--hotspot-3-top);
  width: var(--hotspot-3-width);
  height: var(--hotspot-3-height);
}

.hotspot-4 {
  left: var(--hotspot-4-left);
  top: var(--hotspot-4-top);
  width: var(--hotspot-4-width);
  height: var(--hotspot-4-height);
}

.hotspot-5 {
  left: var(--hotspot-5-left);
  top: var(--hotspot-5-top);
  width: var(--hotspot-5-width);
  height: var(--hotspot-5-height);
}