body {
  margin: 0;
  background: #050505;
  font-family: monospace;
}

#circus {
  display: grid;
  grid-template-columns: repeat(19, 26px);
  grid-template-rows: repeat(19, 26px);
  justify-content: center;
  margin-top: 20px;
}

.room {
  width: 100%;
  height: 100%;
}

/* 🟡 MAIN 3x3 */
.main {
  background: gold;
}

/* 🟦 HALLWAY 3x2 */
.hallway {
  background: #00bcd4;
}

/* 🛏 BEDROOM 2x2 */
.bedroom {
  background: #ff6fae;
  position: relative;
}

/* 🟩 EXTRA */
.extra {
  background: #7CFF6B;
}

/* 🚪 DOORS */
.door-up::after,
.door-down::after,
.door-side::after,
.door-updown::after {
  content: "";
  position: absolute;
  background: white;
}

/* bedroom doors */
.bedroom.door-up::after {
  width: 40%;
  height: 2px;
  top: 0;
  left: 30%;
}

.bedroom.door-down::after {
  width: 40%;
  height: 2px;
  bottom: 0;
  left: 30%;
}

/* extra doors */
.extra.door-side::after {
  width: 2px;
  height: 40%;
  left: 0;
  top: 30%;
}

.extra.door-updown::after {
  width: 40%;
  height: 2px;
  top: 0;
  left: 30%;
}