/* MY LITTLE WORLD ♡ - HOMEPAGE */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  min-height: 100%;
  background: #21131f;
}

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

.room {
  position: relative;
  width: 100%;
  max-width: 1536px;
  aspect-ratio: 3 / 2;
}

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

/* CLICKABLE LABELS */

.hotspot {
  position: absolute;
  display: block;
  z-index: 10;
  cursor: pointer;
  border-radius: 10px;
}

/* TRAVEL - WINDOW */
.travel {
  left: 35.5%;
  top: 20%;
  width: 9%;
  height: 5%;
}

/* LILY - FLOWERS */
.lily {
  left: 31%;
  top: 38%;
  width: 8%;
  height: 5%;
}

/* BOOKS - BOOKSHELF */
.books {
  left: 49%;
  top: 23%;
  width: 9%;
  height: 5%;
}

/* FOOD - MINI FRIDGE */
.food {
  left: 41%;
  top: 44%;
  width: 8%;
  height: 5%;
}

/* ABOUT ME - BULLETIN BOARD */
.about {
  left: 69%;
  top: 17%;
  width: 11%;
  height: 6%;
}

/* LAPTOP - NEW PINK LABEL */
.laptop {
  left: 67%;
  top: 38%;
  width: 10%;
  height: 5%;
}

/* MIRROR */
.mirror {
  left: 86%;
  top: 42%;
  width: 10%;
  height: 5%;
}

/* BED */
.bed {
  left: 2.5%;
  top: 63%;
  width: 8%;
  height: 6%;
}

/* MUSIC - HEADPHONES */
.music {
  left: 41%;
  top: 70%;
  width: 10%;
  height: 6%;
}

/* JOURNAL - COFFEE TABLE */
.journal {
  left: 54%;
  top: 85%;
  width: 11%;
  height: 6%;
}

/* JUNK DRAWER - DESK */
.junk {
  left: 66%;
  top: 56%;
  width: 13%;
  height: 6%;
}

/* PINK HOVER EFFECT */

.hotspot:hover,
.hotspot:focus-visible {
  outline: 2px solid #ffb7e2;
  background: rgba(255, 183, 226, 0.18);
}