* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "poppins", sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.page-container {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.img-3d-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;

  perspective: 2000px;
  perspective-origin: 50% 70%;
}

.floor-container {
  position: relative;
  height: 310px;
  width: 810px;

  box-shadow: 0px 0px 5px #888888;

  transform: rotate3d(1, 0, 0, 50deg);
}

.room {
  position: absolute;
  border-collapse: collapse;
  border: 5px solid black;
  height: 130px;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  gap: 0.5rem;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 1.5rem;
  font-weight: bold;
}

.room > * {
  width: 4rem;
}

.corridor {
  position: absolute;
  top: 130px;
  left: 0;
  border-collapse: collapse;
  border-left: 5px solid black;
  border-right: 5px solid black;
  height: 60px;
  width: 810px;
}

.stairs {
  background-color: #008e9b;
  position: absolute;
  top: 0;
  left: 475px;
  border-collapse: collapse;
  border-top: 5px solid black;
  height: 130px;
  width: 105px;
}

.elevator1 {
  background-color: #ffc75f;
  position: absolute;
  top: 10px;
  right: 0;
  height: 40px;
  width: 40px;
  border-collapse: collapse;
  border: 5px solid black;
}

.elevator2 {
  background-color: #ffc75f;
  position: absolute;
  top: 60px;
  right: 0;
  height: 40px;
  width: 40px;
  border-collapse: collapse;
  border: 5px solid black;
}

.suite1 {
  top: 0;
  left: 0;
  width: 240px;
}

.suite2 {
  top: 0;
  left: 235px;
  width: 240px;
}

.suite3 {
  top: 0;
  left: 575px;
  width: 235px;
}

.suite4 {
  top: 180px;
  left: 0;
  width: 205px;
}

.suite5 {
  top: 180px;
  left: 200px;
  width: 205px;
}

.suite6 {
  top: 180px;
  left: 400px;
  width: 205px;
}

.suite7 {
  top: 180px;
  left: 600px;
  width: 210px;
}

/* lusso */

.lusso1 {
  top: 0px;
  left: 0px;
  width: 115px;
}
.lusso2 {
  top: 0px;
  left: 110px;
  width: 115px;
}
.lusso3 {
  top: 0px;
  left: 220px;
  width: 115px;
}
.lusso4 {
  top: 0px;
  left: 330px;
  width: 145px;
}

.lusso5 {
  top: 0px;
  left: 575px;
  width: 115px;
}

.lusso6 {
  top: 0px;
  left: 685px;
  width: 125px;
}

.lusso7 {
  top: 180px;
  left: 0px;
  width: 115px;
}

.lusso8 {
  top: 180px;
  left: 110px;
  width: 115px;
}

.lusso9 {
  top: 180px;
  left: 220px;
  width: 115px;
}

.lusso10 {
  top: 180px;
  left: 330px;
  width: 115px;
}
.lusso11 {
  top: 180px;
  left: 440px;
  width: 115px;
}
.lusso12 {
  top: 180px;
  left: 550px;
  width: 115px;
}
.lusso13 {
  top: 180px;
  left: 660px;
  width: 150px;
}

/* basic */

.basic1 {
  top: 0px;
  left: 0px;
  width: 85px;
}

.basic2 {
  top: 0px;
  left: 80px;
  width: 85px;
}

.basic3 {
  top: 0px;
  left: 160px;
  width: 85px;
}

.basic4 {
  top: 0px;
  left: 240px;
  width: 85px;
}

.basic5 {
  top: 0px;
  left: 320px;
  width: 80px;
}

.basic6 {
  top: 0px;
  left: 395px;
  width: 80px;
}
.basic7 {
  top: 0px;
  left: 575px;
  width: 80px;
}

.basic8 {
  top: 0px;
  left: 650px;
  width: 80px;
}

.basic9 {
  top: 0px;
  left: 725px;
  width: 85px;
}

.basic10 {
  top: 180px;
  left: 0px;
  width: 85px;
}

.basic11 {
  top: 180px;
  left: 80px;
  width: 85px;
}

.basic12 {
  top: 180px;
  left: 160px;
  width: 85px;
}

.basic13 {
  top: 180px;
  left: 240px;
  width: 85px;
}

.basic14 {
  top: 180px;
  left: 320px;
  width: 85px;
}

.basic15 {
  top: 180px;
  left: 400px;
  width: 85px;
}

.basic16 {
  top: 180px;
  left: 480px;
  width: 85px;
}

.basic17 {
  top: 180px;
  left: 560px;
  width: 85px;
}

.basic18 {
  top: 180px;
  left: 640px;
  width: 85px;
}

.basic19 {
  top: 180px;
  left: 720px;
  width: 90px;
}

/* floor */

.floor2 {
  margin-top: -7rem;
}

.floor3 {
  margin-top: -5rem;
}

.room:hover:not(.occupied) {
  background-color: #0081cf;
  cursor: pointer;
}

.img-3d-side {
  display: flex;
  flex-direction: column;
  gap: 14rem;
}

.img-3d-legend {
  padding: 1rem;
  border: 3px solid black;
  height: 300px;
  width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  box-shadow: 0px 0px 5px #888888;
}

.legend-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.legend-row > h3 {
  font-weight: bold;
  font-size: 1.25rem;
  margin: 0;
}

.legend-square-elevator {
  background-color: #ffc75f;
  border: 3px solid black;
  height: 25px;
  width: 25px;
}

.legend-square-stairs {
  background-color: #008e9b;
  border: 3px solid black;
  height: 25px;
  width: 25px;
}

.legend-square-occupied {
  background-color: #ff6f91;
  border: 3px solid black;
  height: 25px;
  width: 25px;
}

.legend-square-available {
  background-color: #fff;
  border: 3px solid black;
  height: 25px;
  width: 25px;
}

.legend-square-selected {
  background-color: #845ec2;
  border: 3px solid black;
  height: 25px;
  width: 25px;
}

.occupied {
  background-color: #ff6f91;
  cursor: default;
  cursor: not-allowed;
}

.selected {
  background-color: #845ec2;
}

.title {
  font-size: 4rem;
}

.subtitle {
  font-size: 1.5rem;
  font-weight: 500;
}

@media (max-width: 1550px) {
  .page-container > * {
    transform: scale(0.75);
    margin: 0 -5rem;
  }
}

@media (max-width: 1250px) {
  .page-container > * {
    transform: scale(0.5);
    margin: 0 -20rem;
  }
}