// Z-INDEXes
$z-background: -1;
$house: 300;
$z-elevation: 350;
$top: 400;

// COLOR VARIABLES
$snow: #ffffff;
$tar: #000000;
$background: #f57274;
$ground1: #181f31;
$ground2: #6f64a8;
$ground3: #5c558b;
$wall-base: #ffc3a1;
$elevation: #ffd1ba;
$roof: #e85b6e;
$inside: #202a45;
$rails: #963a51;

// MIXINS
@mixin Object($w,$h,$b,$l,$z,$bg) {
  position: absolute;
  content: "";
  width: $w;
  height: $h;
  bottom: $b;
  left: $l;
  z-index: $z;
  background: $bg;
}

@mixin Transform($transforms) {
	   -moz-transform: $transforms;
	     -o-transform: $transforms;
	    -ms-transform: $transforms;
	-webkit-transform: $transforms;
          transform: $transforms;
}

@mixin Keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content; 
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  } 
}

@mixin Animation($content){
  -webkit-animation: $content;
	-moz-animation: $content;
	animation: $content;
}

// boilerplate CSS

body {
  height: 100vh;
  background: #cfbdd6;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  position: relative;
  z-index: -1;
  width: 720px;
  height: 550px;
  background: $snow;
  border: 4px solid #8f6e9d;
  overflow: hidden;
}

// GET SET ART //

/* content */
.top{
  @include Object(110px,55px,357px,57%,$top,#ffd1ba);
  box-shadow: 50px -11px 0 -11px $inside;
  
  &:before{
    @include Object(23px,23px,0px,100%,$top,$inside);
    -webkit-clip-path: polygon(0 0, 0% 100%, 100% 0);
clip-path: polygon(0 0, 0% 100%, 100% 0);
  }
  &:after{
    @include Object(110px,13px,100%,-10px,100,$rails);
    box-shadow: 60px 0px 0 0 $inside;
  }
  
  .clock{
    @include Object(40px,40px,8px,35px,$top,#963a51);
    border-radius: 100%;
  
    &:before{
      @include Object(5px,18px,15px,19px,$top,$inside);
      @include Transform(rotateZ(40deg));
    }
    &:after{
      @include Object(5px,10px,11px,17px,$top,$inside);
      @include Transform(rotateZ(130deg));
    }
  }
  .bell-house{
     @include Object(8px,45px,123%,20px,$top,$rails);
    box-shadow: 8px 0 0 0 $inside,
                96px 0 0 0 $rails,
                104px 0 0 0 $inside;
    
    &:before{
      @include Object(56px,14px,100%,0,$top,$rails);
      box-shadow: 56px 0 0 0 $inside;
    }
    &:after{
      @include Object(112px,45px,calc(100% + 13px),0,$top,$roof);
      -webkit-clip-path: polygon(42% 0, 58% 0, 100% 100%, 0% 100%);
clip-path: polygon(42% 0, 58% 0, 100% 100%, 0% 100%);
      background: linear-gradient(to right, $roof 50%, #786cae 50%)
    }
    
  }
  .bricks{
    @include Object(7px,14px,6px,0px,$top,#eab2a5);
    box-shadow: 0 -22px 0 0 #eab2a5,
                103px -22px 0 0 #eab2a5,
                103px 0px 0 0 #eab2a5; 
    &:before{
    @include Object(13px,5px,8px,12px,$top,#eab2a5);
      box-shadow: 5px -18px 0 0 #eab2a5,
                  70px -10px 0 0 #eab2a5,
                  -68px 135px 0 0 #eab2a5,
                  -60px 234px 0 0 #eab2a5,
                  0px 200px 0 0 #eab2a5,
                  -200px 160px 0 0px #e9a791,
                  -206px 270px 0 0px #fecfb8,
                  -180px 230px 0 0px #ffd1ba,
                  -143px 327px 0 0px #eaa892,
                  -123px 266px 0 0px #ffd0b9,
                  -133px 160px 0 0px #eaa691,
                  33px 160px 0 0px #fed0b9,
                  65px 160px 0 0px #eaa691,
                  23px 190px 0 0px #eaa892,
                  30px 265px 0 0px #fecfb8,
                  30px 325px 0 0px #e9a791,
                  60px 325px 0 0 #ffd0b9,
                  70px 230px 0 0 #eaa891,
                  120px 235px 0 0 #ffd1ba,
                  180px 150px 0 0 #272f4b,
                  180px 220px 0 0 #272f4b,
                  180px 270px 0 0 #272f4b,
                  220px 100px 0 0 #272f4b;
    }
  }
}

.ground{
  @include Object(100%,14px,0%,0%,200,$ground1);
  
  box-shadow: 0 0 0 20px $ground2,
              0 0 0 27px $ground3;
}

.wall{
  @include Object(350px,200px,41px,30%,$house,$wall-base);
  
  &:before{
      @include Object(350px,12px,calc(100% - 12px),-10px,$house,$rails);
    
    box-shadow: 0 110px 0 0px $rails,
                10px 0 0 0 $inside,
                10px 110px 0 0 $inside,
                10px 8px 0 -1px #dcaa93,
                10px 118px 0 -1px #dcaa93;
  }
  &:after{
    @include Object(32px,32px,201px,222px,$house,#202a45);
    -webkit-clip-path: polygon(0 0, 0% 100%, 100% 0);
clip-path: polygon(0 0, 0% 100%, 100% 0);
  }
  
  .elevation{
    @include Object(95px,215px,0px,35%,$z-elevation,$elevation);
    border-left: 6px dashed #eab2a5;
    border-right: 6px dashed #eab2a5;
    border-top: 6px solid #dbb6a6;
    .window{
    @include Object(40px,40px,150px,23%,$house,$inside);
    border-radius: 40px;
      box-shadow: 0 0 0 6px #776bad,
                 6px 0 0 6px $inside;
      &:before{
    @include Object(40px,6px,16px,0%,$house,#373a4d);
      }
      &:after{
    @include Object(6px,40px,0px,17px,$house,#373a4d);
      }
    }
    .door{
    @include Object(40px,65px,18px,24%,$house,$inside);
      box-shadow: 0 0 0 6px #e85b6e,
                  0 0 0 12px $rails,
                  3px 3px 0 15px $inside;
      &:before{
    @include Object(45px,7px,16px,0%,$house,#e95a6e);
        box-shadow: -18px 29px 0 0 $rails,
                    -24px 35px 0 0 $rails,
                    1px 34px 0 0 $rails;
      }
      &:after{
    @include Object(6px,65px,0px,18px,$house,#e95a6e);
      }
    }
  }
  .window1,.window2,.window3,.window4,.window5,.window6,.window7, .window8{
    @include Object(27px,38px,125px,22px,$house,$inside);
    box-shadow: 0 7px 0 0 #963a51,
      -2px 3px 0 4px #786cae,
      2px 3px 0 4px #786cae,
      2px 15px 0 -2px #dbab92;
    &:before{
      @include Object(4px,33px,0px,5px,$house,#373a4d);
    }
    &:after{
      @include Object(12px,4px,20px,5px,$house,#373a4d);
    }
  }
  .window2, .window6{
    left: 75px;
  }
  .window3, .window7{
    left: 250px;
  }
  .window4, .window8{
    left: 305px;
  }
  .window5, .window6, .window7, .window8{
    bottom: 23px;
  }
}

.roof{
  @include Object(350px,140px,241px,39.6%,$house,$roof);
  @include Transform(skew(-45deg));
  
  &:before{
    @include Object(80px,40px,0px,6%,$house,$rails);
    background: linear-gradient(-153deg, #786cae 37px, $rails 37px, $rails);
  }
  &:after{
    @include Object(80px,40px,0px,69%,$house,$rails);
    background: linear-gradient(-153deg, #786cae 37px, $rails 37px, $rails);
  }
  .front{
    @include Object(110px,13px,21px,24.5%,$house,$rails);
    @include Transform(skew(45deg));
    
    &:before{
       @include Object(110px,55px,13px,0,$house,$rails);
      -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    }
    &:after{
      @include Object(30px,56px,12px,83px,$house,#786cae);
      @include Transform(skew(45deg));
    }
    
    .exhaust{
      @include Object(14px, 14px, -15px, -59px, 500,#7f374f);
      border-radius: 100%;
      
      box-shadow: 0 0 0 4px #853750b5,
                  105px -40px 0 5px #9d4456;
      
      &:before{
      @include Object(26px, 42px, -85px, 330px, $house, #43456e);
        box-shadow: 5px 0 0 0 #fec2a0;
      }
      &:after{
      @include Object(26px, 42px, -85px, 390px, $house, #43456e);
        box-shadow: 5px 0 0 0 #fec2a0;
      }
    }
  }
}
.chimney{
    @include Object(50px, 85px, 52%, 37%, 100, #ffd1ba);
    background: linear-gradient(to right, #ffd1ba 60%, $inside 40%);
    &:before{
      @include Object(70px, 15px, 100%, -10px, 100, #ffd1ba);
      background: linear-gradient(to right, #ffd1ba 45%, $inside 40%);
  }
    &:after{
      @include Object(14px, 6px, 50px, 16px, 910, #eab2a5);
      box-shadow: -15px -12px 0 0 #eab2a5,
                  -15px -29px 0 1px #dbb5a8,
                  -1px -29px 0 1px #dbb5a8,
                  -15px 29px 0 0 #dbb5a8;
    }
}
.side{
  @include Object(345px,340px,40px,50%,calc($house - 1),$inside);
  
  &:after{
  @include Object(20px,340px,-10px,100%,calc($house - 1),$inside);
    @include Transform(skewY(45deg));
  }
  
  &:before{
    @include Object(40px,40px,0px,-205px,100,#1a2134);
    border-radius: 100%;
  }
}

.bus{
  @include Object(137px,50px,53px,80px,200,#202a45);

  &:before{
  @include Object(130px,40px,50px,0px,200,#ffc3a1);
    border-top-left-radius: 15px;
  }
  &:after{
  @include Object(130px,40px,50px,70px,200,#202a45);
    border-top-left-radius: 15px;
  }
  
  .windows{
    @include Object(70px,25px,50px,0px,201,#786cae);
    box-shadow: 70px 0 0 0 #404066,
                71px -5px 0 0 #963a51;

    &:before{
    @include Object(30px,5px,30px,1px,201,#ffd0bb);
      border-top-left-radius: 10px;
    }
    &:after{
    @include Object(5px,5px,30px,50px,201,#e85a6c);
      border-radius: 100%;
      box-shadow: 10px 0 0 0 #e85a6c;
    }
  }
  .bonnet{
    @include Object(70px,15px,35px,-6px,201,#e85b6e);
    @include Transform(skewX(-40deg));
    -webkit-clip-path: polygon(0 0, 100% 0%, 83% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 83% 100%, 0% 100%);
  }
  .engine{
    @include Object(56px,36px,00px,-11px,202,#ffc3a1);
    &:before{
    @include Object(10px,22px,00px,-10px,202,#ffc3a1);
      box-shadow: 65px 0 0 0 #ffc3a1;
    };
    &:after{
    @include Object(10px,10px,18px,-10px,202,#786cae);
      border-radius: 100%;
      box-shadow: 65px 0 0 0 #786cae;
    }
    
    .exhaust{
    @include Object(75px,5px,0px,-10px,202,#963a51);
    &:after{
    @include Object(5px,20px,5px,15px,202,#963a51);
      
      box-shadow: 37px -45px 0 0 #8d79ac,
                  37px -49px 0 0 #8d79ac,
                  48px -45px 0 0 #8472ae,
                  48px -49px 0 0 #8472ae,
                  52px -45px 0 0 #8472ae,
                  52px -49px 0 0 #8472ae,
                  54px -45px 0 0 #8472ae,
                  54px -49px 0 0 #8472ae,
                  57px -45px 0 0 #8472ae,
                  57px -49px 0 0 #8472ae,
                  62px -45px 0 0 #8472ae,
                  62px -49px 0 0 #8472ae,
                  65px -45px 0 0 #8472ae,
                  65px -49px 0 0 #8472ae,
        
                  0px -4px 0 0 #7e384e,
                  10px 0px 0 0 #963a51,
                  10px -4px 0 0 #7e384e,
                  20px 0px 0 0 #963a51,
                  20px -4px 0 0 #7e384e,
                  30px 0px 0 0 #963a51,
                  30px -4px 0 0 #7e384e,
                  40px 0px 0 0 #963a51,
                  40px -4px 0 0 #7e384e,
                  ;
      }
    }
  }
  .wheels{
    @include Object(40px,40px,-12px,6px,100,#1a2134);
    border-radius: 100%;
    box-shadow: -10px 0 0 0 #1f2a44,
                80px 0 0 0 #1a2134;
  }
}