html, body {
  margin: 0;
  padding: 0;
  background: #120b07;
  width: 100%;
  min-height: 100%;
}

.page {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #120b07;
}

.image-wrap {
  position: relative;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

.main-image {
  display: block;
  width: 100%;
  height: auto;
}

.hotspot {
  position: absolute;
  display: block;
  background: rgba(255,255,255,0);
  text-decoration: none;
  cursor: pointer;
}

.story-hotspot {
  left: 5%;
  top: 5%;
  width: 32%;
  height: 38%;
}

.poem-hotspot {
  left: 20%;
  top: 64%;
  width: 74%;
  height: 31%;
}

.zack-hotspot {
  left: 49%;
  top: 9%;
  width: 18%;
  height: 58%;
}

.tricia-hotspot {
  left: 66%;
  top: 9%;
  width: 22%;
  height: 58%;
}

/* Spotify QR code hotspot - bottom left corner */
.spotify-hotspot {
  left: 3%;
  top: 80%;
  width: 16%;
  height: 17%;
}

/* Testing: change .hotspot background to rgba(255,255,255,.25) to see boxes */