body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-y: auto;
  background-color: black;
}

.cabinet-page {
  position: relative;
  width: 100%;
}

.cabinet-image {
  width: 100%;
  height: auto;
  display: block;
}

.door {
  position: absolute;
  display: block;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: 
    transform 0.25s ease,
    filter 0.25s ease,
    box-shadow 0.25s ease;
}

.door1 {
  left: calc(178 / 1920 * 100%);
  top: calc(100 / 3240 * 100%);
  width: calc(1507 / 1920 * 100%);
  height: calc(871 / 3240 * 100%);
  background-image: url('assets/cabinet61.png');
}

.door2 {
  left: calc(246 / 1920 * 100%);
  top: calc(1064 / 3240 * 100%);
  width: calc(1388 / 1920 * 100%);
  height: calc(756 / 3240 * 100%);
  background-image: url('assets/cabinet62.png');
}

.door3 {
  left: calc(305 / 1920 * 100%);
  top: calc(1899 / 3240 * 100%);
  width: calc(1283 / 1920 * 100%);
  height: calc(638 / 3240 * 100%);
  background-image: url('assets/cabinet63.png');
}

.door4 {
  left: calc(359 / 1920 * 100%);
  top: calc(2605 / 3240 * 100%);
  width: calc(1196 / 1920 * 100%);
  height: calc(558 / 3240 * 100%);
  background-image: url('assets/cabinet64.png');
}

.door:hover {
  transform: scale(1.015);
  filter: brightness(1.1);
  
}

.room {
  transition: filter 0.05s linear;
}