html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  touch-action: none; 
}

body {
  background: url('bedroom_assets/bedroom_background_v2.jpg') no-repeat center center fixed;
  background-size: cover;
  position: relative;
  font-family: sans-serif;
}

/* Base for the clickables */
.clickable {
  position: absolute;
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
  z-index: 10;
}

.bookshelf {
  top: 30%;
  left: 10%;
  width: 20%;
  aspect-ratio: 3 / 5;
  background-image: url('bedroom_assets/shelf_off.png');
}

.window {
  top: 5%;
  left: 35%;
  width: 30%;
  aspect-ratio: 4 / 3;
  background-image: url('bedroom_assets/window_daylight.png');
}

.bed {
  top: 43%;
  right: 5%;
  width: 30%;
  aspect-ratio: 4 / 3;
  background-image: url('bedroom_assets/bed_labtop_off.png');
}

/* Tweak: Removed the redundant :hover rules since JavaScript handles them */

/* Mobile styles */
@media screen and (max-width: 900px) {
  .bookshelf {
    top: 40%;
    left: -1%;
    width: 38%;
  }

  .window {
    top: 7%;
    left: 20%;
    width: 65%;
  }

  .bed {
    top: 50%;
    right: -3%;
    width: 60%;
  }
}