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(212 / 1920 * 100%);
  top: calc(86 / 3240 * 100%);
  width: calc(1512 / 1920 * 100%);
  height: calc(880 / 3240 * 100%);
  background-image: url('assets/cabinet51.png');
}

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

.door3 {
  left: calc(339 / 1920 * 100%);
  top: calc(1897 / 3240 * 100%);
  width: calc(1285 / 1920 * 100%);
  height: calc(641 / 3240 * 100%);
  background-image: url('assets/cabinet53.png');
}

.door4 {
  left: calc(395 / 1920 * 100%);
  top: calc(2608 / 3240 * 100%);
  width: calc(1189 / 1920 * 100%);
  height: calc(553 / 3240 * 100%);
  background-image: url('assets/cabinet54.png');
}

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

.room {
  transition: filter 0.05s linear;
}