/************************************/
/* Created by: 		Craig Finkle	*/
/*					2020.09.18 		*/
/************************************/
/****/
/***/
/**/
*, *::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  transform-style: preserve-3d;
  -webkit-tap-highlight-color: transparent;
}

/* Generic */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #C6C5E1;
  cursor: pointer;
}

.face {
  position: absolute;
}

/***************/
.house {
  position: absolute;
  width: 36vw;
  height: 24vw;
  transform: perspective(20000px) rotateX(75deg) rotateZ(35deg) translateZ(-9vw);
  transition: transform .1s linear;
}

.shadows {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.shadow-a {
  position: absolute;
  right: -2vw;
  bottom: 0;
  width: 130%;
  height: 103%;
  transform-origin: top right;
  transform: skewY(-3deg);
  background-color: #686688;
  box-shadow: -1vw 1vw 1.5vw #686688;
  filter: blur(0.5vw);
}

.shadow-b {
  position: absolute;
  top: 0;
  width: 100%;
  height: 101.5%;
  background-color: #5f5d7c;
}

/***************/
/***************/
.al {
  width: 3vw;
  height: 24vw;
  position: absolute;
  left: 0;
  top: 0;
}
.al__front {
  width: 38vw;
  height: 0.4vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(23.6vw);
}
.al__right {
  width: 24vw;
  height: 0.4vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(38vw) translateX(-24vw) translateY(-0.4vw);
}
.al__top {
  width: 38vw;
  height: 24vw;
  transform-origin: top left;
  transform: translateZ(0.4vw);
}
.al__front {
  background-image: linear-gradient(to right, #8985ad, #c4c2d6);
}
.al__right {
  background-color: #fbfbfb;
}
.al__top {
  background-image: linear-gradient(to right, #a7a4c2 40%, #e5e5e5, #f2f2f2);
}
.al__top::before {
  content: '';
  position: absolute;
  bottom: 0;
  width: 13vw;
  height: 7vw;
  background-image: linear-gradient(-135deg, transparent 20%, rgba(169, 215, 207, 0.75));
}
.al__top::after {
  content: '';
  position: absolute;
  bottom: 1vw;
  left: 6vw;
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  background-image: radial-gradient(rgba(251, 251, 251, 0.25), transparent);
  filter: blur(0.7vw);
}


/* LEFT LIGHT POLE*/
.cl {
  width: 5vw;
  height: 24vw;
  position: absolute;
  left: 0;
  top: 0;
  transform: translateZ(0.41vw);
}
.cl__front {
  width: 3.5vw;
  height: 24vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-2vw) translateX(0.2vw);
}
.cl__right {
  width: 19vw;
  height: 24vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(3.5vw) translateX(-22vw) translateY(-24vw);
}
.cl__front {
  display: flex;
  justify-content: center;
  background-image: linear-gradient(to bottom, #c4c2d6, #9894b7);
  overflow: hidden;
}
.cl__front::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1.1vw;
  width: 200%;
  height: 3vw;
  background-image: linear-gradient(to right, rgba(222, 245, 241, 0.3), rgba(196, 194, 214, 0.25));
  filter: blur(0.175vw);
  transform: rotateZ(-30deg);
}
.cl__right {
  background-image: linear-gradient(to top, #a7a4c2, #8985ad, #cbe7e3 70%);
}
.cl__right::before {
  content: '';
  position: absolute;
  right: 0;
  width: calc(100% - 2.5vw);
  height: 100%;
  background-image: linear-gradient(to bottom, #fbfbfb, #cbe7e3 15%, #d9d9d9 80%, #a7a4c2);
  filter: blur(0.5vw);
}
.cl__right .lamp:nth-of-type(1) {
  left: 25%;
}
.cl__right .lamp:nth-of-type(2) {
  left: 50%;
}
.cl__right .lamp:nth-of-type(3) {
  left: 75%;
}
/* MIDDLE LIGHT POLE*/
.cl2 {
  width: 5vw;
  height: 24vw;
  position: absolute;
  left: 0;
  top: 0;
  transform: translateZ(0.41vw) translateX(30vw);
}
.cl2__front {
  width: 3.5vw;
  height: 15vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(7vw) translateX(2vw) translateY(-6vw);
}
.cl2__right {
  width: 3vw;
  height: 15vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(5.5vw) translateX(-22vw) translateY(-21vw);
}
.cl2__front {
  display: flex;
  justify-content: center;
  background-image: linear-gradient(to bottom, #c4c2d6, #9894b7);
  overflow: hidden;
}
.cl2__front::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1.1vw;
  width: 200%;
  height: 3vw;
  background-image: linear-gradient(to right, rgba(222, 245, 241, 0.3), rgba(196, 194, 214, 0.25));
  filter: blur(0.175vw);
  transform: rotateZ(-30deg);
}
.cl2__right {
  background-image: linear-gradient(to top, #a7a4c2, #8985ad, #cbe7e3 70%);
}
.cl2__right::before {
  content: '';
  position: absolute;
  right: 0;
  width: calc(100% - 2.5vw);
  height: 100%;
  background-image: linear-gradient(to bottom, #fbfbfb, #cbe7e3 15%, #d9d9d9 80%, #a7a4c2);
  filter: blur(0.5vw);
}

/* RIGHT LIGHT POLE*/
.cl3 {
  width: 5vw;
  height: 24vw;
  position: absolute;
  left: 0;
  top: 0;
  transform: translateZ(0.41vw) translateX(30vw) translateY(-17vw);
}
.cl3__front {
  width: 3.5vw;
  height: 15vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(7vw) translateX(2vw) translateY(-6vw);
}
.cl3__right {
  width: 3vw;
  height: 15vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(5.5vw) translateX(-22vw) translateY(-21vw);
}
.cl3__front {
  display: flex;
  justify-content: center;
  background-image: linear-gradient(to bottom, #c4c2d6, #9894b7);
  overflow: hidden;
}
.cl3__front::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1.1vw;
  width: 200%;
  height: 3vw;
  background-image: linear-gradient(to right, rgba(222, 245, 241, 0.3), rgba(196, 194, 214, 0.25));
  filter: blur(0.175vw);
  transform: rotateZ(-30deg);
}
.cl3__right {
  background-image: linear-gradient(to top, #a7a4c2, #8985ad, #cbe7e3 70%);
}
.cl3__right::before {
  content: '';
  position: absolute;
  right: 0;
  width: calc(100% - 2.5vw);
  height: 100%;
  background-image: linear-gradient(to bottom, #fbfbfb, #cbe7e3 15%, #d9d9d9 80%, #a7a4c2);
  filter: blur(0.5vw);
}

/* MIDDLE SUPPORT WALL */
.cc {
  width: 1vw;
  height: 19vw;
  position: absolute;
  left: 15vw;
  top: 0;
  transform: translateZ(13vw) translateY(1vw);
}
.cc__front {
  width: 1vw;
  height: 16vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(3vw) translateY(5vw);
}
.cc__right {
  width: 19vw;
  height: 17vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(1vw) translateX(-19vw) translateY(-11vw);
}
.cc__front {
  background-image: linear-gradient(to bottom, #b5b3cc, #c4c2d6 10%);
}
.cc__right {
  background-color: #fbfbfb;
}
/***************/
/* RIGHT WALL */
.ccr {
  width: 1vw;
  height: 19vw;
  position: absolute;
  left: 33vw;
  top: 0;
  transform: translateZ(13vw);
}
.ccr__front {
  width: 1vw;
  height: 16vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(3vw) translateY(5vw);
}
.ccr__right {
  width: 17vw;
  height: 15vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(1vw) translateX(-19vw) translateY(-8.9vw);
}
.crc__front {
  background-image: linear-gradient(to bottom, #b5b3cc, #c4c2d6 10%);
}
.ccr__right {
  background-image: linear-gradient(to bottom, #635808, #d8c32a 30%);
}
/***************/
.cc2 {
  width: 12vw;
  height: 19vw;
  position: absolute;
  left: 15vw;
  top: 0;
  transform: translateZ(12.5vw) translateX(10vw);
}
.cc2a__front {
  width: 3.1vw;
  height: 16vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(4vw) translateX(-22vw) translateY(5vw);
  background-image: linear-gradient(to bottom, #05348a, #4c699e 30%);
}
.cc2b__front {
  width: 3.1vw;
  height: 16vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(4vw) translateX(-19vw) translateY(5vw);
  background-image: linear-gradient(to bottom, #05348a, #4c699e 30%);
}
.cc2c__front {
  width: 3.1vw;
  height: 16vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(4vw) translateX(-16vw) translateY(5vw);
  background-image: linear-gradient(to bottom, #05348a, #4c699e 30%);
}
.cc2d__front {
  width: 3.1vw;
  height: 16vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(4vw) translateX(-13vw) translateY(5vw);
  background-image: linear-gradient(to bottom, #05348a, #4c699e 30%);
}
.cc2e__front {
  width: 1vw;
  height: 16vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(4vw) translateX(-10vw) translateY(5vw);
  background-image: linear-gradient(to bottom, #05348a, #4c699e 30%);
}
.cc2f__front {
  width: 18vw;
  height: 14.5vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(4.5vw) translateX(-9vw) translateY(5.1vw);
  background-image: linear-gradient(to bottom, #520b0b, #864646 30%);
}
.ccl3 {
  width: 1vw;
  height: 3vw;
  position: absolute;
  left: 19vw;
  top: 21vw;
  transform: translateZ(1.43vw);
}
.ccl3__front {
  width: 1vw;
  height: 7vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-7vw) translateX(-2vw) translateY(1vw);
}
.ccl3__right {
  width: 3vw;
  height: 6vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(-1vw) translateX(0vw) translateY(-5vw);
}
.ccl3__front {
  background-image: linear-gradient(to top, #a7a4c2, #c4c2d6);
}
.ccl3__right {
  background-image: linear-gradient(to bottom, #6c6799, #8985ad 70%, #badfd9);
}
.ccl2 {
  width: 1vw;
  height: 3vw;
  position: absolute;
  left: 36vw;
  top: 6vw;
  transform: translateZ(1.43vw);
}
.ccl2__front {
  width: 1vw;
  height: 7vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-7vw) translateX(-2vw) translateY(1vw);
}
.ccl2__right {
  width: 3vw;
  height: 6vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(-1vw) translateX(0vw) translateY(-5vw);
}
.ccl2__front {
  background-image: linear-gradient(to top, #a7a4c2, #c4c2d6);
}
.ccl2__right {
  background-image: linear-gradient(to bottom, #6c6799, #8985ad 70%, #badfd9);
}
.ccl4 {
  width: 1vw;
  height: 3vw;
  position: absolute;
  left: 36vw;
  top: 21vw;
  transform: translateZ(1.43vw);
}
.ccl4__front {
  width: 1vw;
  height: 7vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-7vw) translateX(-2vw) translateY(1vw);
}
.ccl4__right {
  width: 3vw;
  height: 6vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(-1vw) translateX(0vw) translateY(-5vw);
}
.ccl4__front {
  background-image: linear-gradient(to top, #a7a4c2, #c4c2d6);
}
.ccl4__right {
  background-image: linear-gradient(to bottom, #6c6799, #8985ad 70%, #badfd9);
}
.cml {
  width: 38vw;
  height: 19vw;
  position: absolute;
  left: 0;
  top: 0;
  transform: translateZ(7vw);
}
.cml__front {
  width: 38vw;
  height: 1vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(22vw) translateZ(2vw);
}
.cml__right {
  width: 25vw;
  height: 1vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(38vw) translateX(-25vw) translateY(-1vw);
}
.cml__top {
  width: 38vw;
  height: 25vw;
  transform-origin: top left;
  transform: translateZ(1vw);
}
.cml__front {
  background-image: linear-gradient(to bottom, #bbb9d0, #c4c2d6);
}
.cml__right {
  background-color: #fbfbfb;
}
.cml__top {
  background-image: linear-gradient(to right, #8985ad, #a7a4c2 30%, #97cfc6);
  box-shadow: inset 0.3vw 0.3vw 2vw rgba(103, 93, 110, 0.1), inset -0.3vw 0.3vw 2vw rgba(103, 93, 110, 0.1), inset 0.3vw -0.3vw 2vw rgba(103, 93, 110, 0.1), inset -0.3vw -0.3vw 2vw rgba(103, 93, 110, 0.1);
}

.cmr {
  position: absolute;
  left: 16vw;
  top: 0;
  transform: translateZ(22vw) translateY(-2vw) translateX(-0.5vw);
}
.cmr__front {
  width: 23vw;
  height: 1vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(23vw) translateY(1vw);
}
.cmr__right {
  width: 24vw;
  height: 1vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(23vw) translateX(-24vw);
}
.cmr__top {
  width: 23vw;
  height: 24vw;
  transform-origin: top left;
  transform: translateZ(0vw);
}
.cmr__front {
  background-image: linear-gradient(to bottom, #b5b3cc, #c4c2d6);
}
.cmr__right {
  background-color: #fbfbfb;
}
.cmr__top {
  background-image: linear-gradient(to right, #843d3d, #c56363 20%); 
}
.cmr__top::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
}

.cmt {
  width: 18vw;
  height: 24vw;
  position: absolute;
  left: 3vw;
  top: 0;
  transform: translateZ(24.2vw) translateX(-2vw);
}
.cmt__front {
  width: 18vw;
  height: 1vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(23vw);
}
.cmt__right {
  width: 24vw;
  height: 1vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(18vw) translateX(-24vw) translateY(-1vw);
}
.cmt__top {
  width: 18vw;
  height: 24vw;
  transform-origin: top left;
  transform: translateZ(1vw);
}
.cmt__front {
  background-image: linear-gradient(to bottom, #b5b3cc, #c4c2d6);
}
.cmt__right {
  background-color: #fbfbfb;
}
.cmt__top {
  background-color: #5fa3d0;
}
.ec {
  width: 15vw;
  height: 1vw;
  position: absolute;
  left: 16vw;
  bottom: 7vw;
  transform: translateZ(0.5vw) translateX(1vw) translateY(0vw);
}
.ec__front {
  width: 18vw;
  height: 6vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-2vw);
}
.ec__front {
  border: 0.1vw solid rgba(77, 109, 152, 0.5);
  overflow: hidden;
  background-image: linear-gradient(to right, rgba(97, 135, 190, 0.1), rgba(112, 149, 201, 0.1));
}
.ec2__front {
  width: 18vw;
  height: 6vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-2vw) translateX(-17vw);
}
.ec2__front {
  border: 0.1vw solid rgba(77, 109, 152, 0.5);
  overflow: hidden;
  background-image: linear-gradient(to right, rgba(97, 135, 190, 0.1), rgba(112, 149, 201, 0.1));
}

.er {
  width: 14vw;
  height: 1vw;
  position: absolute;
  left: 29.8vw;
  top: 0;
  transform: translateZ(0.5vw) translateX(4vw) translateY(2vw);
}
.er__front {
  width: 0.1vw;
  height: 11vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(5.6vw);
}
.er__back {
  width: 0.1vw;
  height: 11vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-0.1vw) translateY(-11vw);
}
.er__right {
  width: 16.6vw;
  height: 11vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.1vw) translateX(-16.6vw) translateY(-11vw);
}
.er__left {
  width: 16.6vw;
  height: 11vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-11vw);
}
.er__top {
  width: 0.1vw;
  height: 16.6vw;
  transform-origin: top left;
  transform: translateZ(11vw);
}
.er__bottom {
  width: 0.1vw;
  height: 16.6vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-0.1vw);
}
.er__right {
  border: 0.1vw solid rgba(77, 109, 152, 0.5);
  overflow: hidden;
  background-image: linear-gradient(to right, rgba(97, 135, 190, 0.1), rgba(112, 149, 201, 0.1));
}
/***************/

/*WINDOWS - ALL CODE*/

.fb {
  width: 5vw;
  height: .25vw;
  position: absolute;
  left: 1.5vw;
  bottom: 6.1vw;
  transform: translateZ(11vw) translateY(2.5vw) translateX(2.25vw);
}
.fb__all {
  width: 2vw;
  height: 0.25vw;
  transform-origin: bottom left;
}
.fb__all {
  background-color: #a7a4c2;
}
.fb__all::before {
  content: '';
  position: absolute;
  top: .25vw;
  left: .1vw;
  width: calc(100% - .25vw);
  height: 2vw;
  border: 0.1vw solid rgba(77, 109, 152, 0.5);
  background-image: linear-gradient(to right, rgba(97, 135, 190, 0.8), rgba(112, 149, 201, 0.8));
}
.fb__1 {
  transform: rotateX(-90deg) translateZ(0vw) translateX(1vw);
}
.fb__2 {
  transform: rotateX(-90deg) translateX(4vw);
}
.fb__3 {
  transform: rotateX(-90deg) translateX(7vw);
}
.fb__4 {
  transform: rotateX(-90deg) translateX(10vw);
}
.fb__5 {
  transform: rotateX(-90deg) translateZ(0vw) translateX(1vw) translateY(-4vw);
}
.fb__6 {
  transform: rotateX(-90deg) translateX(4vw) translateY(-4vw);
}
.fb__7 {
  transform: rotateX(-90deg) translateX(7vw) translateY(-4vw);
}
.fb__8 {
  transform: rotateX(-90deg) translateX(10vw) translateY(-4vw);
}
.fb__9 {
  transform: rotateX(-90deg) translateZ(0vw) translateX(1vw) translateY(-8vw);
}
.fb__10 {
  transform: rotateX(-90deg) translateX(4vw) translateY(-8vw);
}
.fb__11 {
  transform: rotateX(-90deg) translateX(7vw) translateY(-8vw);
}
.fb__12 {
  transform: rotateX(-90deg) translateX(10vw) translateY(-8vw);
}
.fb__13 {
  transform: rotateX(-90deg) translateZ(0vw) translateX(1vw) translateY(-12vw);
}
.fb__14 {
  transform: rotateX(-90deg) translateX(4vw) translateY(-12vw);
}
.fb__15 {
  transform: rotateX(-90deg) translateX(7vw) translateY(-12vw);
}
.fb__16 {
  transform: rotateX(-90deg) translateX(10vw) translateY(-12vw);
}

.fb__20 {
  transform: rotateX(-90deg) translateZ(0vw) translateX(15vw);
}
.fb__21 {
  transform: rotateX(-90deg) translateX(18vw);
}
.fb__22 {
  transform: rotateX(-90deg) translateX(21vw);
}
.fb__23 {
  transform: rotateX(-90deg) translateX(24vw);
}
.fb__24 {
  transform: rotateX(-90deg) translateZ(0vw) translateX(15vw) translateY(-4vw);
}
.fb__25 {
  transform: rotateX(-90deg) translateX(18vw) translateY(-4vw);
}
.fb__26 {
  transform: rotateX(-90deg) translateX(21vw) translateY(-4vw);
}
.fb__27 {
  transform: rotateX(-90deg) translateX(24vw) translateY(-4vw);
}
.fb__28 {
  transform: rotateX(-90deg) translateZ(0vw) translateX(15vw) translateY(-8vw);
}
.fb__29 {
  transform: rotateX(-90deg) translateX(18vw) translateY(-8vw);
}
.fb__30 {
  transform: rotateX(-90deg) translateX(21vw) translateY(-8vw);
}
.fb__31 {
  transform: rotateX(-90deg) translateX(24vw) translateY(-8vw);
}

.fb__40 {
  transform: rotateX(-90deg) rotateY(90deg) translateX(3vw) translateZ(30.3vw);
}
.fb__41 {
  transform: rotateX(-90deg) rotateY(90deg) translateX(7vw) translateZ(30.3vw);
}
.fb__42 {
  transform: rotateX(-90deg) rotateY(90deg) translateX(11vw) translateZ(30.3vw);
}
.fb__44 {
  transform: rotateX(-90deg) rotateY(90deg) translateX(3vw) translateZ(30.3vw) translateY(-4vw);
}
.fb__45 {
  transform: rotateX(-90deg) rotateY(90deg) translateX(7vw) translateZ(30.3vw) translateY(-4vw);
}
.fb__46 {
  transform: rotateX(-90deg) rotateY(90deg) translateX(11vw) translateZ(30.3vw) translateY(-4vw);
}
.fb__48 {
  transform: rotateX(-90deg) rotateY(90deg) translateX(3vw) translateZ(30.3vw) translateY(-8vw);
}
.fb__49 {
  transform: rotateX(-90deg) rotateY(90deg) translateX(7vw) translateZ(30.3vw) translateY(-8vw);
}
.fb__50 {
  transform: rotateX(-90deg) rotateY(90deg) translateX(11vw) translateZ(30.3vw) translateY(-8vw);
}
.lamp {
  position: absolute;
  top: 19vw;
  width: .75vw;
  height: 2.5vw;
  border-radius: 5vw;
  opacity: .95;
  background-color: #def5f1;
  box-shadow: 0.15vw 0.15vw 0.75vw rgba(186, 223, 217, 0.5), 0.15vw -0.15vw 0.75vw rgba(186, 223, 217, 0.5), -0.15vw 0.15vw 0.75vw rgba(186, 223, 217, 0.5), -0.15vw -0.15vw 0.75vw rgba(186, 223, 217, 0.5);
  filter: blur(0.15vw);
}
/***************/
/**** DOOR *****/
#door-master {

}
.door-l {
  width: .125vw;
  height: 1vw;
  left: 12vw;
  bottom: 6.75vw;
  transform: translateZ(0vw) translateX(7vw) translateY(3.5vw);
  position: absolute;
}
.door-l__front {
  width: 0.125vw;
  height: 6vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-5.5vw);
}
.door-l__right {
  width: 0.5vw;
  height: 6vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.125vw) translateX(-0.5vw) translateY(-6vw);
}
.door-l__front {
  background-color: #413e5c;
}
.door-l__back {
  background-color: #716d9d;
}
.door-l__right {
  background-color: #716d9d;
}
.door-l__left {
  background-color: #413e5c;
}
.door-l__top {
  background-color: #716d9d;
}
.door-l__bottom {
  background-color: #716d9d;
}

.door-r {
  width: 2vw;
  height: 1vw;
  left: 15vw;
  bottom: 6.75vw;
  transform: translateZ(0vw) translateX(7vw) translateY(3.5vw);
  position: absolute;
}
.door-r__front {
  width: 2vw;
  height: 6vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-5.5vw);
}
.door-r__right {
  width: 0.5vw;
  height: 6vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(2vw) translateX(-0.5vw) translateY(-6vw);
}
.door-r__front {
  background-color: #413e5c;
}
.door-r__right {
  background-color: #716d9d;
}

.door-b {
  width: 2vw;
  height: 1vw;
  left: 11vw;
  bottom: 6.75vw;
  transform: translateZ(0.4vw) translateX(7vw) translateY(3.5vw);
  position: absolute;
}
.door-b__front{
  width: 6vw;
  height: 0.125vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(0.375vw);
}
.door-b__right {
  width: 0.5vw;
  height: 0.125vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(6vw) translateX(-0.5vw) translateY(-0.125vw);
}
.door-b__top {
  width: 6vw;
  height: 0.5vw;
  transform-origin: top left;
  transform: translateZ(0.125vw) ;
}
.door-b__front {
  background-color: #413e5c;
}
.door-b__back {
  background-color: #716d9d;
}
.door-b__right {
  background-color: #716d9d;
}
.door-b__top {
  background-color: #716d9d;
}