body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}


.room {
  position: relative;
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
  max-width: 177.78vh;
  margin: auto;
  overflow: hidden;
}


.room .bg {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover; 
  top: 0;
  left: 0;
  z-index: 1;
}


.desk-object {
  position: absolute;
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
  cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.desk-object:hover {
  transform: scale(1.015);
  filter: brightness(1.1);
  
}

.desk-object.obj1 {
  left: calc(845 / 1920 * 100%);
  top: calc(404 / 1080 * 100%);
  width: calc(345 / 1920 * 100%);
  height: calc(362 / 1080 * 100%);
  background-image: url('assets/guestbook.png');
  filter: drop-shadow(-13px 7px 4px rgba(0, 0, 0, 0.553));
}


.desk-object.obj2 {
  left: calc(1170 / 1920 * 100%);
  top: calc(572 / 1080 * 100%);
  width: calc(362 / 1920 * 100%);
  height: calc(404 / 1080 * 100%);
  background-image: url('assets/memes.png');
  filter: drop-shadow(-1px 4px 2px rgba(0, 0, 0, 0.56));
}

.desk-object.obj3 {
  left: calc(316 / 1920 * 100%);
  top: calc(611 / 1080 * 100%);
  width: calc(327 / 1920 * 100%);
  height: calc(387 / 1080 * 100%);
  background-image: url('assets/mrt.png');
  filter: drop-shadow(-2px 2px 2px rgba(0, 0, 0, 0.458));
}

html, body {
  margin: 0;
  padding: 0;
  background-color: black; /* <-- this removes white bars */
  overflow: hidden;
}