* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: black;
}

.scene {
  position: relative;

  width: 100vw;
  height: 56.25vw;   /* 16:9 ratio */

  max-height: 100vh;
  margin: auto;

  overflow: hidden;
}


#background {
  position: absolute;
  inset: 0;
  pointer-events: none;

  background-image: url("/assets/images/foyer.jpg");
  background-size: cover;
  background-position: center;

  z-index: 0;
}

/* =========================
   HOTSPOTS
========================= */

.hotspot {
  position: absolute;
  cursor: pointer;
  z-index: 50;
  background: rgba(255, 0, 0, 0);
}

/* =========================
   TOOLTIP
========================= */
#tooltip {
    position: absolute;
    padding: 6px 10px;
    background: rgba(0,0,0,0.7);
    color: white;
    font-size: 12px;
    pointer-events: none;
    opacity: 0;
    transition: 0.2s;
    border: 1px solid rgba(255,255,255,0.2);
    z-index: 9999;
}


/* coatrack */
#coatrack {
  top: 40%;
  left: 0%;
  width: 15vw;
  height: 50vw;
}

/* parlour */
#parlour {
  top: 0%;
  left: 0%;
  width: 25vw;
  height: 25vw;
}

/* courtyard */
#courtyard {
    top: 5%;
    left: 25%;
    width: 22vw;
    height: 30vw;
}

/* library */
#library {
    top: 0%;
    left: 86%;
    width: 15vw;
    height: 60vw;
}

/* painting */
#painting {
  top: 7%;
  left: 50%;
  width:15vw;
  height: 30vw;
}

/* archives */
#archives {
    top: 5%;
    left: 60%;
    width: 17vw;
    height: 28vw;
} 

/* vanity */
#vanity {
  top: 20%;
  left: 77%;
  width: 10vw;
  height: 25vw;
}