html, body {
  margin: 0;
  padding: 0;
  background: #181a1b;
}

a {
  text-decoration: none;
  color: inherit;
}

.label {
  position: absolute;
  top: 10px;
  left: 10px;

  font-family: 'Courier New', Courier, monospace;
  font-size: 20px;
  letter-spacing: 1px;

  color: #f4e6c8;
  background: rgba(40,25,10,0.75);

  padding: 6px 12px;
  border: 1px solid #caa86a;

  text-shadow: 1px 1px 2px black;
}

.scene-wrapper {
  position: relative;
  width: min(1400px, 100%);
  margin: 0 auto;
  background: transparent;
}

.scene-image {
  display: block;
  width: 100%;
  height: auto;
  border: dashed 10px rgb(226, 49, 49);
}

.hotspot {
  position: absolute;
  display: block;
}

/* Optional: visible debugging border */
.hotspot {
  position: absolute;
  border: 2px solid rgba(255,0,0,0.0);
}

.hotspot:hover {
  border: 2px solid rgba(255, 180, 80, 0.8);
  background: rgba(255, 200, 100, 0.12);
}

/* Left chalkboard */
.locations {
  left: 2.5%;
  top: 5.5%;
  width: 22%;
  height: 20%;
}

/* Right chalkboard */
.availability {
  right: 3%;
  top: 2.5%;
  width: 22%;
  height: 25%;
}

/* Paper in hands */
.vpn_info {
  left: 40%;
  bottom: 0%;
  width: 30%;
  height: 46%;
  transform: rotate(3deg);
}

/* Blonde girl / counter */
.tos {
  left: 45%;
  top: 7%;
  width: 18%;
  height: 48%;
}

/* Back room worker / shelf */
.register {
  left: 10%;
  top: 40%;
  width: 23%;
  height: 38%;
}

/* Back Home / Vruum */
.home {
  right: 0%;
  bottom: 5%;
  width: 15%;
  height: 15%;
}