body {
  background: #cd883f;
  width: 100%;
  height: auto;
}

article {
  text-align: center;
  color: teal;
}

.house-container {
  position: relative;
  width: 600px;
  height: 700px;
  left: 50px;
  top: 100px;
  margin-top: 30px;
  padding: 30px;
}

.cloud-1 {
  position: absolute;
  height: 250px;
  width: 330px;
  background: #f0f0f0;
  border-radius: 100%;
  left: 0;
  top: -10px;
}

.cloud-2 {
  position: absolute;
  height: 250px;
  width: 330px;
  background: #f0f0f0;
  border-radius: 100%;
  left: 240px;
  top: -70px;
}

.cloud-3{
  position: absolute;
  height: 250px;
  width: 330px;
  background: #F0f0f0;
  border-radius: 100%;
  left: 460px;
  top: -10px;
}

.cloud-4 {
  position: absolute;
  height: 250px;
  width: 350px;
  background: rgba(255, 255, 255, 0.90);
  border-radius: 100%;
  left: -50px;
  top: -90px;
  z-index: -1;
}

.cloud-5 {
  position: absolute;
  height: 250px;
  width: 350px;
  background: rgba(255, 255, 255, 0.90);
  border-radius: 100%;
  left: 490px;
  top: -90px;
  z-index: -1;
}

.house {
  position: absolute;
  height: 500px;
  width: 400px;
  background: azure;
  left: 175px;
  top: 250px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: 0 0 35px 35px rgba(43, 27, 32, 0.4);
  margin: 0 auto;
  z-index: 1;
}

.house-1 {
  position: absolute;
  height: 400px;
  width: 350px;
  left: 25px;
  top: 50px;
  background: lightyellow;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.roof {
  position: absolute;
  height: 0;
  width: 350px;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
  border-bottom: 150px solid brown;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  left: 150px;
  top: 160px;
  z-index: 1;
}

.chimney {
  height: 70px;
  width: 50px;
  background: darkgrey;
  position: absolute;
  left: 500px;
  top: 100px;
  border-radius: 5px;
}

.small-chimney {
  position: absolute;
  height: 16px;
  width: 15px;
  background: #1a1a1a;
  left: 17.5px;
}

.smoke-1 {
  position: absolute;
  height: 5px;
  width: 10px;
  border-radius: 100%;
  background: darkgray;
  left: 20px;
  bottom: 70px;
}

.smoke-2 {
  position: absolute;
  height: 5px;
  width: 10px;
  border-radius: 100%;
  background: darkgray;
  left: 20px;
  bottom: 80px;
}

.smoke-3 {
  position: absolute;
  height: 5px;
  width: 10px;
  border-radius: 100%;
  background: darkgray;
  left: 20px;
  bottom: 90px;
}

.smoke-4 {
  position: absolute;
  height: 5px;
  width: 10px;
  border-radius: 100%;
  background: darkgray;
  left: 20px;
  bottom: 100px;
}

.floor {
  position: absolute;
  height: 10px;
  width: 345px;
  background: blanchedalmond;
  top: 700px;
  left: 200px;
  z-index: 1;
}

.door {
  position: absolute;
  height: 190px;
  width: 100px;
  background: brown;
  border-radius: 5px;
  top: 510px;
  left: 330px;
  z-index: 1;
  border: 2px solid burlywood;
}

.door-1 {
   position: absolute;
   height: 80px;
   width: 50px;
   background: palegoldenrod;
   border-radius: 10px;
   z-index: 1;
   top: 15px;
   left: 5px;
   filter: brightness(60%);
   border: 2px solid gold;
 }
 
 .keyhole {
   position: absolute;
   height: 15px;
   width: 10px;
   background: gold;
   border-radius: 5px;
   left: 76px;
   top: 87.5px;
   z-index: 1;
   border: 1px solid palegoldenrod;
 }
 
 .window {
   position: absolute;
   height: 90px;
   width: 80px;
   background: lightblue;
   border-radius: 5px;
   left: 450px;
   top: 350px;
   z-index: 1;
   border: 4px solid lightgray;
 }
 
 .window-1 {
   position: absolute;
   height: 90px;
   width: 80px;
   background: lightblue;
   border-radius: 5px;
   left: 220px;
   top: 350px;
   z-index: 1;
   border: 4px solid lightgray;
 }
 
 .window-boxes {
   position: absolute;
   height: 10px;
   width: 80px;
   background: #8b4513;
   top: 95px;
 }
 
 .window-boxes-1 {
   position: absolute;
   height: 10px;
   width: 80px;
   background: #8b4513;
   top: 95px;
 }
 
 .circle {
   position: absolute;
   height: 15px;
   width: 10px;
   border-radius: 100%;
   background: #ff0000;
   z-index: -1;
   top: -10px;
   left: 5px;
 }
 
 .circle-1 {
   position: absolute;
   height: 15px;
   width: 10px;
   border-radius: 100%;
   background: #ffd700;
   z-index: -1;
   top: -10px;
   left: 20px;
 }
 
 .circle-2 {
   position: absolute;
   height: 15px;
   width: 10px;
   border-radius: 100%;
   background: green;
   z-index: -1;
   top: -10px;
   left: 40px;
 }
 
 .circle-3 {
   position: absolute;
   height: 15px;
   width: 10px;
   border-radius: 100%;
   background: #ff69b4;
   z-index: -1;
   top: -10px;
   left: 60px;
 }
 
 .circle-4 {
   position: absolute;
   height: 15px;
   width: 10px;
   border-radius: 100%;
   background: #ff0000;
   z-index: -1;
   top: -10px;
   left: 5px;
}

 .circle-5 {
   position: absolute;
   height: 15px;
   width: 10px;
   border-radius: 100%;
   background: #ffd700;
   z-index: -1;
   top: -10px;
   left: 20px;
 }
 
 
 .circle-6 {
   position: absolute;
   height: 15px;
   width: 10px;
   border-radius: 100%;
   background: green;
   z-index: -1;
   top: -10px;
   left: 35px;
 }

 .circle-7 {
   position: absolute;
   height: 15px;
   width: 10px;
   border-radius: 100%;
   background: #ff69b4;
   z-index: -1;
   top: -10px;
   left: 60px;
}
 
 .small-1 {
   position: absolute;
   height: 60px;
   width: 25px;
   background: azure;
   left: 43px;
   top: 15px;
   z-index: 1;
   border-radius: 5px;
 }
 
 .small-2 {
   position: absolute;
   height: 60px;
   width: 25px;
   background: azure;
   top: 15px;
   left:10px;
   z-index: 1;
   border-radius: 5px;
 }
 
 .small-3 {
   position: absolute;
   height: 60px;
   width: 25px;
   background: azure;
   z-index: 1;
   top: 15px;
   left: 10px;
   border-radius: 5px;
 }
 
 .small-4 {
   position: absolute;
   height: 60px;
   width: 25px;
   left: 43px;
   top: 15px;
   background: azure;
   z-index: 1;
   border-radius: 5px;
 }
 
 .step {
   height: 40px;
   width: 100px;
   background: radial-gradient(circle,#455a64 30%,#000);
   position: absolute;
   left: 315px;
   top: 705px;
   z-index: 1;
   transform: skew(-45deg);
   border-radius: 5px;
 }
 
 .pathway-1 {
   position: absolute;
   height: 40px;
   width: 90px;
   background: #8b5a2b;
   top: 750px;
   left: 300px;
   border-radius: 5px;
 }
 
 .pathway-2 {
   position: absolute;
   height: 40px;
   width: 90px;
   background: #8b5a2b;
   top: 800px;
   left: 300px;
   border-radius: 5px;
 }
 
 .pathway-3 {
   position: absolute;
   height: 40px;
   width: 90px;
   background: #8b5a2b;
   top: 850px;
   left: 300px;
   border-radius: 5px;
 }
 
 .ground {
   height: 60px;
   width: 400px;
   background: brown;
   position: absolute;
   left: 177px;
   top: 730px;
   z-index: -1;
   transform: skew(-55deg);
   border-radius: 5px;
   filter: brightness(40%);
}
   
 .sticky-tree {
   position: absolute;
   height: 200px;
   width: 50px;
   background: linear-gradient(to top,#2b1b17, #6b4331, #d2b48c);
   top: 650px;
 }
 
 .triangle-1 {
   position: absolute;
   height: 0;
   width: 50px;
   border-right: 30px solid transparent;
   border-left: 30px solid transparent;
   border-bottom: 80px solid #228b22;
   top: -50px;
   left: -30px;
 }
 
 .triangle-2 {
   position: absolute;
   height: 0;
   width: 50px;
   border-right: 30px solid transparent;
   border-left: 30px solid transparent;
   border-bottom: 80px solid #228b22;
   top: -100px;
   left: -30px;
 }
 
 .triangle-3 {
   position: absolute;
   height: 0;
   width: 50px;
   border-right: 30px solid transparent;
   border-left: 30px solid transparent;
   border-bottom: 80px solid #228b22;
   top: -150px;
   left: -30px;
 }
 
 .red {
   position: absolute;
   height: 10px;
   width: 10px;
   background: red;
   z-index: 1;
   left: 10px;
   top: 45px;
   border-radius: 100%;
 }
 
 .red-1 {
   position: absolute;
   height: 10px;
   width: 10px;
   background: red;
   z-index: 1;
   left: 5px;
   top: 35px;
   border-radius: 100%;
 }
 
 .red-2 {
   position: absolute;
   height: 10px;
   width: 10px;
   background: red;
   z-index: 1;
   left: 25px;
   top: 40px;
   border-radius: 100%;
 }
 
 .red-3 {
   position: absolute;
   height: 10px;
   width: 10px;
   background: red;
   z-index: 1;
   left: 30px;
   top: 30px;
   border-radius: 100%;
 }
 
 .red-4 {
   position: absolute;
   height: 10px;
   width: 10px;
   background: red;
   z-index: 1;
   left: 35px;
   top: 5px;
   border-radius: 100%;
 }
 
 .red-5 {
   position: absolute;
   height: 10px;
   width: 10px;
   background: red;
   z-index: 1;
   left: 7px;
   top: 10px;
   border-radius: 100%;
 }
 
 .oval-earth {
   position: absolute;
   height: 50px;
   width: 120px;
   background: #2b1b17;
   border-radius: 100%;
   top: 160px;
   left: -30px;
   z-index: -1;
 }
 
 .green-grass {
   position: absolute;
   height: 350px;
   width: 300px;
   background: linear-gradient(to top,#228b22, #7cfc00);
   border-radius: 100%;
   top: 300px;
   left: 650px;
 }
 
 .green-grass-1 {
   position: absolute;
   height: 350px;
   width: 300px;
   background: linear-gradient(to top,#228b22, #7cfc00);
   border-radius: 100%;
   top: 450px;
   left: 650px;
}

.green-grass-2 {
   position: absolute;
   height: 350px;
   width: 300px;
   background: linear-gradient(to top,#228b22, #7cfc00);
   border-radius: 100%;
   top: 650px;
   left: 650px;
}

 .green-grass-3 {
   position: absolute;
   height: 350px;
   width: 300px;
   background:linear-gradient(to top,#228b22, #7cfc00);
   border-radius: 100%;
   top: 850px;
   left: 650px;
}

.flower-hedge {
  position: absolute;
  height: 0;
  width: 50px;
  border-right: 30px solid transparent;
  border-left: 30px solid transparent;
  border-bottom: 80px solid #3c2f2f;
  left: 740px;
  top: 1150px;
  z-index: -1;
}

@media(max-width:480px) {
  .house-container{
    width: 100%;
    height: auto;
    transform: scale(0.3);
    transform-origin: top left;
  }
}