*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: blanchedalmond;
}
.main{
    position: relative;
    width: 1000px;
    height: 600px;
    /* border: 1px solid red; */
}
.main .ground{
    position: absolute;
    top: 470px;
    width: 100%;
    height: 130px;
    background: #444;
}
.ground::after{
    content: '';
    position: absolute;
    top: 0;
    left: 521px;
    width: 90px;
    height: 130px;
    transform: skewX(10deg);
    background: #888;
}
.ground::before{
    content: '';
    position: absolute;
    top: 0;
    left: 70px;
    width: 500px;
    height: 130px;
    transform: skewX(-30deg);
    background: #888;
}
.main .hmain{
    position: absolute;
    top: 330px;
    left: 9%;
    width: 800px;
    height: 170px;
    background: rgb(127, 127, 201)
}
.main .hmain::before{
    content: '';
    position: absolute;
    top: -2px;
    left: -15px;
    width: 832px;
    height: 6px;
    background: white;
}
.door{
    position: absolute;
    top: 9px;
    left: 20px;
    width: 160px;
    height: 160px;
    background: white;
    border-top-left-radius: 3px;
}
.door::before{
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    width: 140px;
    height: 150px;
    background-image: linear-gradient(to right, transparent 10%,transparent 90%,#333 90%),
    linear-gradient(to bottom,transparent 10%,#2c2c46 10%,#61616b 90%);
    background-size: 40px 3px;
}
.door::after{
    content: '';
    position: absolute;
    top: 7px;
    left: 10px;
    width: 140px;
    height: 10px;
    border-radius: 5px;
    background: rgb(175, 245, 223);
}
.main .roof{
    position: absolute;
    left: 20%;
    top: 128px;
    width: 400px;
    height: 200px;
    background: linear-gradient(rgb(6, 6, 53),rgb(16, 16, 136));
}
.main .roof::before{
    content: '';
    position: absolute;
    top: 0;
    left: -94px;
    width: 400px;
    height: 200px;
    transform: skewX(-17deg);
    background: linear-gradient(rgb(6, 6, 53),rgb(16, 16, 136)); 
}
.main .roof::after{
    content: '';
    position: absolute;
    top: 0;
    left: 110px;
    width: 566px;
    height: 200px;
    transform: skewX(17deg);
    background: linear-gradient(rgb(6, 6, 53),rgb(16, 16, 136)); 
}
.main .front{
    position: absolute;
    top: 310px;
    left: 27%;
    width: 335px;
    z-index: 1;
    height: 190px;
    background: rgb(214, 214, 255);
}
.main .front::before{
    content: '';
    position: absolute;
    top: 13px;
    left: -10px;
    height: 5px;
    width: 361px;
    background: white;
    
}
.main .front::after{
    content: '';
    position: absolute;
    top: 25px;
    left: 20px;
    width: 295px;
    height: 165px;
    background-color:rgb(234, 234, 250);
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.door2{
    position: absolute;
    top: 35px;
    left: 25px;
    width: 284px;
    height: 155px;
    background: white;
    transition: 2s;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    box-shadow: 0 0 10px #999;
    z-index: 1;
}
.door2:hover::before{
    height: 30px;
}
.door2::before{
    content: '';
    transition: 5s;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 284px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    height: 155px;
    /* background: rgb(124, 124, 184) */
    background-image: linear-gradient(to right, transparent 10%,transparent 90%,rgb(97, 116, 179) 90%),
    linear-gradient(to bottom,rgb(3, 18, 66) 10%,rgb(159, 190, 247) 10%,#aaaaf1 90%);
    background-size: 60px 15px;

}
.door2::after{
    content: '';
    position: absolute;
    top: 0;
    left: 15px;
    width: 260px;
    height: 20px;
    background-image: linear-gradient(to right, transparent 10%,transparent 90%,rgb(0, 0, 0) 90%),
    linear-gradient(to bottom,transparent 10%,#5e5e6d 10%,#44444b 90%);
     background-size: 10px 15px;
    border-radius: 5px;
}
img{
    width: 284px;
    height: 155px;
}
.main .front_roof{
    position: absolute;
    top: 258px;
    left: 32%;
    width: 100px;
    height: 65px;
    z-index: 1;
    background: linear-gradient(rgb(6, 6, 53),rgb(16, 16, 136)); 
}
.main .front_roof::before{
    content: '';
    position: absolute;
    left: -55px;
    width: 100px;
    height: 65px;
    background: linear-gradient(rgb(6, 6, 53),rgb(16, 16, 136)); 
    transform: skewX(-12deg);
}
.main .front_roof::after{
    content: '';
    position: absolute;
    left: 70px;
    width: 225px;
    height: 65px;
    background: linear-gradient(rgb(6, 6, 53),rgb(16, 16, 136)); 
    transform: skewX(12deg);
}
.chimni{
    position:absolute;
    top: 20px;
    left: 470px;
    width: 40px;
    height: 80px;
    background: rgb(82, 28, 28);
}
.chimni::before{
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    width: 50px;
    height: 4px;
    background: rgb(82, 28, 28);

}
.main .front_top{
    position: absolute;
    top: 187px;
    left: 280px;
    width: 315px;
    height: 70px;
    z-index: 1;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color:rgb(234, 234, 250);
}
.main .front_top::before{
    content: '';
    position: absolute;
    top: -115px;
    left: 135px;
    width: 25px;
    height: 40px;
    border-radius: 3px;
    /* background: rgb(241, 241, 164); */
    background-image: linear-gradient(to right, transparent 10%,transparent 90%,rgb(0, 0, 0) 90%),
    linear-gradient(to bottom,transparent 10%,rgb(241, 241, 164) 10%,#61616b 90%);
    border-radius: 5px;
    background-size: 10px 15px;
    border: 10px solid rgb(216, 216, 231);
}
.main .front_top::after{
    content: '';
    position: absolute;
    top: -28px;
    left: 7px;
    width: 300px;
    height: 30px;
    border-top-left-radius: 38px;
    border-top-right-radius: 38px;
    background: rgb(234, 234, 250);
}
.main .front_top_1{
    position: absolute;
    top: 70px;
    left: 325px;
    width: 225px;
    height: 225px;
    background: rgb(13, 13, 105);
    transform: rotate(45deg);
}
.main .front_top_1::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 265px;
    box-shadow: 0 0 10px;
    border-left:2px solid rgb(13, 13, 105);
    background: rgb(232, 232, 252);
}
.main .front_top_1::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 265px;
    height: 10px;
    box-shadow: 0 0 10px;
    border-top:2px solid rgb(13, 13, 105);
    border-left:2px solid rgb(13, 13, 105);
    background: rgb(232, 232, 252);
}
.window{
    position: absolute;
    top: -8px;
    left: 40px;
    width: 100px;
    z-index: 1;
    height: 70px;
    border: 10px solid rgb(168, 168, 196);
    background: rgb(168, 168, 196);

}
.window::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 95%;
    background: rgba(255, 208, 0, 0.507);
    border: 2px solid rgba(0, 0, 0, 0.603);
}
.window::after{
    content: '';
    position: absolute;
    top: 0;
    left: 56%;
    width: 40%;
    height: 95%;
    background: rgba(255, 208, 0, 0.507);
    border: 2px solid rgba(0, 0, 0, 0.603);
}
.front2{
    position: absolute;
    top: 182px;
    left: 460px;
    width: 135px;
    height: 85px;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    background: rgb(214, 214, 255);
    z-index: 3;
}
.front2_top{
    position: absolute;
    left:482px;
    top:132px;
    transform: rotate(45deg);
    z-index: 2;
    width: 90px;
    height: 90px;
    background: rgb(13, 13, 105);
}
.front2_top::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 125px;
    box-shadow: 0 0 10px;
    border-left:2px solid rgb(13, 13, 105);
    background: rgb(232, 232, 252);
}
.front2_top::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 137px;
    height: 10px;
    box-shadow: 0 0 10px;
    border-left:2px solid rgb(13, 13, 105);
    border-top:2px solid rgb(13, 13, 105);
    background: rgb(232, 232, 252);
}
.window2{
    position: absolute;
    top: 12px;
    left: 30px;
    width: 80px;
    z-index: 1;
    height: 50px;
    border: 10px solid rgb(168, 168, 196);
    background: rgb(168, 168, 196);

}
.window2::before{
    content: '';
    position: absolute;
    top: 0;
    left: -4px;
    width: 45%;
    height: 100%;
    background: rgba(255, 208, 0, 0.507);
    border: 2px solid rgba(0, 0, 0, 0.603);
}
.window2::after{
    content: '';
    position: absolute;
    top: 0;
    left: 56%;
    width: 45%;
    height: 100%;
    background: rgba(255, 208, 0, 0.507);
    border: 2px solid rgba(0, 0, 0, 0.603);
}
.front3{
    position: absolute;
    top: 320px;
    left: 710px;
    width: 180px;
    height: 180px;
    z-index: 1;
    background: rgb(175, 175, 226)
}
.front3:after{
    content: '';
    position: absolute;
    top: -70px;
    left: 63px;
    width: 40px;
    height: 40px;
    border: 8px solid rgb(207, 221, 252);
    border-radius: 50%;
    background-image: linear-gradient(to right, transparent 10%,transparent 90%,rgb(0, 0, 0) 90%),
    linear-gradient(to bottom,transparent 10%,rgb(241, 241, 164) 10%,#61616b 90%);
    background-size: 5px 5px;
}
.front3::before{
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    width: 140px;
    height: 160px;
    background-image: linear-gradient(to right, transparent 10%,transparent 90%,rgb(0, 0, 0) 90%),
    linear-gradient(to bottom,transparent 10%,rgb(130, 176, 219) 10%,rgb(130, 145, 219) 90%);
    background-size: 1px 8px;

}
.front3_roof{
    position: absolute;
    top: 255px;
    left: 738px;
    width: 125px;
    height: 125px;
    background: rgb(13, 13, 105);
    transform: rotate(45deg);
}
.front3_roof::before{
    content: '';
    position: absolute;
    top: 0;
    left: -10px;
    width: 10px;
    height: 145px;
    background: rgb(229, 238, 250);
}
.front3_roof::after{
    content: '';
    position: absolute;
    top: -10px;
    left:-10px;
    width: 155px;
    height: 10px;
    background: rgb(229, 238, 250);
}
.window3{
    position: absolute;
    top: 20px;
    left: 40px;
    width: 100px;
    height: 100px;
    background: rgb(214, 220, 252);
}
.window3::before{
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    width: 40px;
    height: 80px;
    border: 1px solid black;
    background: rgb(247, 217, 86);
}
.window3::after{
    content: '';
    position: absolute;
    top: 10px;
    left: 50px;
    width: 40px;
    height: 80px;
    border: 1px solid black;
    background: rgb(247, 217, 86);
}
.door3{
    position: absolute;
    top: 360px;
    left: 600px;
    width: 60px;
    height: 135px;
    background: rgb(14, 14, 114);
}
.door3::before{
    content: '';
    position: absolute;
    top: 7px;
    left: 12px;
    width: 40px;
    height: 30px;
    background-image: linear-gradient(to right, transparent 10%,transparent 90%,rgb(0, 0, 0) 90%),
    linear-gradient(to bottom,transparent 10%,rgb(241, 241, 164) 10%,#61616b 90%);
    background-size: 22px 15px;
}
.door3::after{
    content: '';
    position: absolute;
    left: 50px;
    top: 65px;
    width: 3px;
    height: 20px;
    background: #999;
}