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

body {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
}

.room {
  position: relative;
  width: 100%;
  max-width: 1024px;
}

.bedroom {
  display: block;
  width: 100%;
  height: auto;
}

/* Invisible clickable areas */

.hotspot {
  position: absolute;
  display: block;
  z-index: 10;
}

/* WINDOW */
.window {
  left: 12%;
  top: 10%;
  width: 22%;
  height: 27%;
}

/* LILY / PLANT */
.lily {
  left: 19%;
  top: 28%;
  width: 15%;
  height: 10%;
}

/* BOOKSHELF */

.bookshelf {

  left: 25%;

  top: 10%;

  width: 30%;

  height: 50%;
}

/* BULLETIN BOARD */
.bulletin {
  left: 59%;
  top: 8%;
  width: 21%;
  height: 30%;
}

/* FRIDGE */
.fridge {
  left: 78%;
  top: 20%;
  width: 18%;
  height: 30%;
}

/* MIRROR */
.mirror {
  left: 73%;
  top: 43%;
  width: 20%;
  height: 25%;
}

/* STEREO */
.stereo {
  left: 49%;
  top: 48%;
  width: 16%;
  height: 18%;
}

/* JOURNAL ON BED */

.journal {

  left: 30%;

  top: 50%;

  width: 35%;

  height: 30%;
}

/* DESK */
.desk {
  left: 58%;
  top: 61%;
  width: 27%;
  height: 24%;
}
/* JOURNAL ON DESK */
.desk-journal {
  left: 55%;
  top: 55%;
  width: 35%;
  height: 30%;
}

/* LAPTOP */
.laptop {
  left: 63%;
  top: 62%;
  width: 18%;
  height: 13%;
}

/* Little hover effect so you know what is clickable */
.hotspot:hover {
  cursor: pointer;
}