<div class="spooky-house">
  <div class="content-circle">
    <div class="house">
      <div class="porch"></div>
      <div class="first-floor"></div>
      <div class="second-floor"></div>
      <div class="roof"></div>
      <div class="door"></div>
      <div class="small-windows"></div>
      <div class="big-window"></div>
      <div class="frames"></div>
    </div>
    <div class="moon"></div>
    <div class="rain">
      <div class="dropOne"></div>
      <div class="dropTwo"></div>
      <div class="dropThree"></div>
      <div class="dropFour"></div>
      <div class="dropFive"></div>
    </div>
  </div>
</div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: black;
  overflow: hidden;
}

.spooky-house {
  position: relative;
}

.content-circle {
  position: relative;
  width: 450px;
  height: 450px;
  overflow: hidden;
  background-color:#212F3C;
  border-radius:50%;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
}

.content-circle:before {
  content:"";
  position: absolute;
  width:450px;
  height:200px;
  top:300px;
  border-radius:50% 50% 0 0;
  background-color: #000;
}

.house {
  position:absolute; 
  width: 120px;
  height:150px;
  background-color:black;
  left:180px;
  top:160px;
  transform:rotate(5deg);
  z-index:2;
}

.house:before {
  content:"";
  position:absolute;
  width: 0;
  height: 0;
  border-bottom: 30px solid black;
  border-right: 50px solid transparent;
  left:115px;
  top:70px;
  transform:rotate(5deg);
}

.house:after {
  content:"";
  position:absolute;
  width:5px;
  height:65px;
  background-color:black;
  left:145px;
  top:95px;  
}

.porch {
  position: absolute;
  width:30px;
  height:100px;
  background-color:black;
  left:-20px;
  top:55px;
  transform:rotate(-10deg);
}
.porch:before {
  content:"";
  position:absolute;
  width: 0;
  height: 0;
  border-bottom: 20px solid black;
  border-left: 40px solid transparent;
  left:-35px;
  top:45px;
}

.porch:after {
  content:"";
  position: absolute;
  position:absolute;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 30px solid black;
  left:-5px;
  top:-25px;
}

.first-floor {
  position: absolute;
  transform: rotate(-10deg);
  background-color: black;
  width:5px;
  height:45px;
  left:-37px;
  top:125px;
}

.first-floor:before {
  content:"";
  position: absolute;
  background-color: #000;
  width:85px;
  height:90px;
  top:-150px;
  left:50px;
}

.first-floor:after {
  content:"";
  position: absolute;
  border-left: 52px solid transparent;
  border-right: 52px solid transparent;
  border-bottom: 50px solid black;
  top:-199px;
  left:40px;
}

.second-floor {
  position: absolute;
  background-color: black;
  width:35px;
  height:100px;
  transform: rotate(3deg);
  top:-70px;
  left:70px;
}

.second-floor:before {
  content:"";
  position: absolute;
  background-color: black;
  width:20px;
  height:100px;
  left:33px;
  top:40px;
  transform: rotate(-3deg);
}

.second-floor:after {
  content:"";
  position:absolute; 
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 30px solid black;
  top:12px;
  left:15px;
}

.roof {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 30px solid black;
  left:65px;
  top:-95px;
}

.roof:before {
  content:"";
  position: absolute;
  width:6px;
  height:20px;
  background-color: black;
  top:5px;
  left:10px;
  box-shadow: 20px 35px black;
}

.roof:after {
  content:"";
  position: absolute;
  width:6px;
  height:20px;
  background-color: black;
  transform: rotate(-10deg);
  left:-110px;
  top:35px;
  box-shadow: -27px 97px black;
}

.door {
  position: absolute;
  background-color: #ffd166;
  width:30px;
  height:50px;
  transform: rotate(-5deg);
  border-radius:30px 30px 0 0;
  box-shadow: inset -10px 5px rgba(0,0,0,0.5);
  top:90px;
  left:40px;
}

.door:before {
  content:"";
  position: absolute;
  background-color: #ffd166;
  border-radius:30px 30px 0 0;
  box-shadow: inset -5px 2px rgba(0,0,0,0.5);
  width:20px;
  height:30px;
  left:-40px;
  transform: rotate(-3deg);
}

.door:after {
  content:"";
  position: absolute;
  background-color: #ffd166;
  box-shadow: inset -5px 2px rgba(0,0,0,0.5);
  border-radius:30px 30px 0 0;
  width:20px;
  height:30px;
  left:45px;
  transform: rotate(3deg);
}

.small-windows {
  position: absolute;
  background-color: #ffd166;
  border-radius:30px 30px 0 0;
  width:13px;
  height:25px;
  left:100px;
  top:-20px;
  box-shadow:-19px -40px #ffd166, inset -4px 2px rgba(0,0,0,0.5);;
}

.small-windows:before {
  content:"";
  position: absolute;
  background-color: #ffd166;
  border-radius:30px 30px 0 0;
  width:13px;
  height:25px;
  transform: rotate(-7deg);
  left:-60px;
  top:50px;
  box-shadow:-60px 20px #ffd166;
}

.big-window {
  position: absolute;
  background-color: #ffd166;
  border-radius:30px 30px 0 0;
  transform: rotate(-7deg);
  width:30px;
  height:40px;
  top:-35px;
  left:10px;
}

.big-window:before, .big-window:after {
  content:"";
  position: absolute;
  background-color: black;
}

.big-window:before {
  height: 40px;
  width:2px;
  left:15px;
  box-shadow: 13px 55px black, -47px 80px black, -32px 120px black;
}

.big-window:after {
  height:2px;
  width:40px;
  top:22px;
  box-shadow: 10px 58px black, -45px 78px black, -30px 120px black;
}

.frames {
  position: absolute;
  width:2px;
  height: 40px;
  background-color: black;
  top:-65px;
  left:86.5px;
  box-shadow: 19px 40px black, 7px 150px black;

}

.frames:before {
  content:"";
  position: absolute;
  height:2px;
  width:30px;
  background-color: black;
  top:17px;
  left:-10px;
  box-shadow: 10px 40px black, 5px 150px black;
}

.moon {
  position:absolute;
  width:200px;
  height:200px;
  border-radius:50%;
  background-color: #95A5A6;
  z-index:1;
  left:80px;
  top:40px;
  box-shadow:inset 7px -7px 0 rgba(0,0,0,0.09);
}

.moon:before, .moon:after {
  content:"";
  position: absolute;
  border-radius:50%;
  background-color:rgba(0,0,0,0.09);
  box-shadow:inset -5px 5px 0 rgba(0,0,0,0.09);
}
.moon:before { 
  width:30px;
  height:30px;
  top:50px;
  left:45px;
}
  
.moon:after {
  width:40px;
  height:40px;
  top:100px;
  left:30px;
}

.rain {
  position: absolute;
  z-index:5;
}

.rain:before {
content:"";
position: absolute;
width: 450px;
height: 450px;
background: #fff;
opacity: 0; 
animation: lighting 3s linear infinite;
}

.dropOne, .dropTwo, .dropThree, .dropFour, .dropFive {
  position: absolute;
  background-color: rgba(211, 211, 211,0.3);
  height: 10px;
  width: 1px;
  top:0;
  box-shadow: 0 -270px rgba(211, 211, 211,0.3), -50px -50px rgba(211, 211, 211,0.3), -50px -150px rgba(211, 211, 211,0.3),50px -395px rgba(211, 211, 211,0.3), 50px -200px rgba(211, 211, 211,0.3),50px -100px rgba(211, 211, 211,0.3), 100px -400px rgba(211, 211, 211,0.3), 100px -320px rgba(211, 211, 211,0.3),100px -150px rgba(211, 211, 211,0.3),150px -200px rgba(211, 211, 211,0.3), 200px -100px rgba(211, 211, 211,0.3), 200px -370px rgba(211, 211, 211,0.3),250px -330px rgba(211, 211, 211,0.3),250px -220px rgba(211, 211, 211,0.3),300px -70px rgba(211, 211, 211,0.3), 300px -140px rgba(211, 211, 211,0.3),300px -300px rgba(211, 211, 211,0.3);
}

.dropOne {
  animation: rain 1.5s linear infinite;
  left:100px;
}

.dropTwo {
  left:-50px;
  animation: rain 1.2s linear infinite;
}

.dropThree {
  left:50px;
  animation: rain 1.7s linear infinite;
}

.dropFour {
  left:150px;
  animation: rain 1.4s linear infinite;
}

.dropFive {
  left:80px;
  animation: rain 1.3s linear infinite;
}



@keyframes rain {
  0% {transform: translateY(0);}
  100% {transform: translateY(1000px);}
}

@keyframes lighting {
0% {opacity: 0;}
10% {opacity: 0;}
11% {opacity: 1;}
14% {opacity: 0;}
20% {opacity: 0;}
21% {opacity: 1;}
24% {opacity: 0;}
104% {opacity: 0;}
}