/* Cloud Base - Main fluffy shape */
.cloud
{
    position:relative;
    width:180px;
    height:60px;
    bottom:50px;
    border-radius:50px;
    background:#fff ;
    animation:move 8s linear infinite; /*Horizonal-animation*/
    z-index:10;/*Ensures cloud stays above other elements*/
}

/* Left puff of the cloud */
.cloud::before 
{
    content:'';
    position:absolute;
    top:-40px;/* Positioned above the base */
    left:20px;
    background:#fff;
    width:70px;
    height:70px;
    border-radius:50%; /* Perfect circle */
}

/* Right puff of the cloud */
.cloud::after
{
    content:'';
    position:absolute;
    top:-50px;/* Higher than the left puff */
    right:20px;
    background:#fff;
    width:90px;
    height:90px;
    border-radius:50%;
}

/* Sun Base - Yellow circle with rays */
.sun
{
    position:absolute;
    top:-115px;/* Positioned above the scene */
    left:30px;
    margin:0;
    padding:0;
    width:115px;
    height:115px;
    background:#ffe208;
    border-radius:50%;/* Perfect circle */
    box-shadow: 0 0 15px rgba(255,255,8,0.5);/* Glow effect */
    z-index:5;/* Below cloud but above house */
    animation:sun 20s linear infinite;/* Rotation animation */
}

/* Sun Rays - Generated via <li> elements */
.sun li
{
    list-style:none;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:170px;
    height:2px;
    background:#ffe208;
    box-shadow: 0 0  15px rgba(255,255,8,.5);
    border-radius:50%;/* Soft edges */

}

/* Rotate each ray at 30-degree intervals (12 rays total) */
.sun li:nth-child(1)
{
    transform:translate(-50%, -50%) rotate(0deg);
}
.sun li:nth-child(2)
{
    transform:translate(-50%, -50%) rotate(90deg);
}
.sun li:nth-child(3)
{
    transform:translate(-50%, -50%) rotate(45deg);
}
.sun li:nth-child(4)
{
    transform:translate(-50%, -50%) rotate(-45deg);
}
.sun li:nth-child(5)
{
    transform:translate(-50%, -50%) rotate(22.5deg);
}
.sun li:nth-child(6)
{
    transform:translate(-50%, -50%) rotate(-22.5deg);
}
.sun li:nth-child(7)
{
    transform:translate(-50%, -50%) rotate(67.5deg);
}
.sun li:nth-child(8)
{
    transform:translate(-50%, -50%) rotate(-67.5deg);
}
.sun li:nth-child(9)
{
    transform:translate(-50%, -50%) rotate(112.5deg);
}
.sun li:nth-child(10)
{
    transform:translate(-50%, -50%) rotate(-112.5deg);
}
.sun li:nth-child(11)
{
    transform:translate(-50%, -50%) rotate(112.5deg);
}
.sun li:nth-child(12)
{
    transform:translate(-50%, -50%) rotate(-112.5deg);
}

/* Cloud Animation - Moves horizontally */
@keyframes move{
    0% {
        transform: translate(0);
    }
    50%{
        transform: translate(100px);/* Moves right */
    }
    100%{
        transform: translate(0);/* Returns */
    }
}

/* Sun Animation - Rotates continuously */
@keyframes sun{
    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(180deg);
    }
    100%{
        transform: rotate(360deg);/* Full spin */
    }
}






/* Designing House */
*
{
    margin:0;
    padding:-90;
    box-sizing:border-box;
}

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

/* House Base*/
.house
{
    position:relative;
    width:700px;
    height:350px;
    border-bottom:8px solid #175117; /* Grass effect */
}

/* Main House Structure */
.main
{
    position: absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:400px;
    height:200px;
    background:#f9f9f9 ;
}

.main::before
{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:10px;
    background: rgba(0,0,0,0.1);
}

.roof
{
    position: absolute;
    top:-100px;
    height:100px;
    width:100%;

}

/* Roof - Triangular shape created with skewed pseudo-elements */
.roof::before
{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:60%;
    height:100%;
    background: #257582;
    transform:skewX(330deg); /* Left slant */
}

.roof::after
{
    content:'';
    position:absolute;
    top:0;
    right:0;
    width:60%;
    height:100%;
    background: #257582;
    transform:skewX(30deg);/* Right slant */
}

.front
{
    position:absolute;
    bottom:0;
    left:50%;
    transform: translateX(-58%);
    width:180px;
    height:180px;
    background:#f1f1f1;
}

/* Front Attic - Diamond-shaped with a window */
.front::before
{
    content:'';
    position:absolute;
    left:50%;
    top:-64px;
    width:126px;
    height:126px;
    background:#f1f1f1;
    transform:translateX(-50%) rotate(45deg);/* Diamond rotation */

    /* Outline */
    border-top:4px solid #222;
    border-left:4px solid #222;
}

.front::after
{
    content:'';
    position:absolute;
    top:-20px;
    left:50%;
    transform:translateX(-50%);
    width:120px;
    height:60px;
    background:#333;
    background-image: linear-gradient(to right,transparent 10%, transparent 90%, #333 90%), linear-gradient(to bottom, transparent 10%, #6d6d7d 10%, #6d6d7d 90%);
    background-size: 10px 15px;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border:4px solid #333;
}

.door
{
    position:absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:60px;
    height:80px;
    background:#4d2418;
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
}

.door::before
{
    content:'';
    position:absolute;
    top:30px;
    left:-45px;
    width:30px;
    height:30px;
    background:#333;
    background-image: linear-gradient(to right, transparent 10%, transparent 90%, #333 90%),
    linear-gradient(to bottom, transparent 01%, #6d6d7d 10%, #6d6d7d 90%);
    background-size:10px 15px;
    border:2px solid #333;
    border-top:5px solid #333;
    border-bottom:5px solid #333;
}

.door::after
{
    content:'';
    position:absolute;
    top:30px;
    right:-45px;
    width:30px;
    height:30px;
    background:#333;
    background-image: linear-gradient(to right, transparent 10%, transparent 90%, #333 90%),
    linear-gradient(to bottom, transparent 01%, #6d6d7d 10%, #6d6d7d 90%);
    background-size:10px 15px;
    border:2px solid #333;
    border-top:5px solid #333;
    border-bottom:5px solid #333;
}

.line
{
    position:absolute;
    top:38%;
    width:100%;
    height:12px;
    border-top: 4px solid #257582;
    border-bottom: 4px solid #257582;
}

.adjst
{
    top:45%;
}

.windows_right
{
    position:absolute;
    top:20px;
    right:30px;
    width:60px;
    height:50px;
    background:#333;
    background-image: linear-gradient(to right, transparent 10%, transparent 90%, #333 90%),
    linear-gradient(to bottom, transparent 01%, #6d6d7d 10%, #6d6d7d 90%);
    background-size:10px 15px;
    border:2px solid #333;
    border-top:5px solid #333;
    border-bottom:5px solid #333;
}

.windows_right::before
{
    content:'';
    position:absolute;
    top:90px;

    width:50px;
    height:60px;
    background:#333;
    background-image: linear-gradient(to right, transparent 10%, transparent 90%, #333 90%),
    linear-gradient(to bottom, transparent 01%, #6d6d7d 10%, #6d6d7d 90%);
    background-size:10px 15px;
    border:2px solid #333;
    border-bottom:5px solid #333;
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
}

.windows_left
{
    position:absolute;
    top:20px;
    left:30px;
    width:60px;
    height:50px;
    background:#333;
    background-image: linear-gradient(to right, transparent 10%, transparent 90%, #333 90%),
    linear-gradient(to bottom, transparent 01%, #6d6d7d 10%, #6d6d7d 90%);
    background-size:10px 15px;
    border:2px solid #333;
    border-top:5px solid #333;
    border-bottom:5px solid #333;
}

.windows_left::before
{
    content:'';
    position:absolute;
    top:90px;
    width:50px;
    height:60px;
    background:#333;
    background-image: linear-gradient(to right, transparent 10%, transparent 90%, #333 90%),
    linear-gradient(to bottom, transparent 01%, #6d6d7d 10%, #6d6d7d 90%);
    background-size:10px 15px;
    border:2px solid #333;
    border-bottom:5px solid #333;
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
}

.side
{
    position:absolute;;
    bottom:0;
    left:-120px;
    width:140px;
    height:140px;
    background: #f1f1f1;
}

.side::before
{
    content:'';
    position:absolute;
    top:-52px;
    left:50%;
    width:100px;
    height:100px;
    background:#f1f1f1;
    transform:translateX(-50%) rotate(45deg);
    border-top:4px solid #222;
    border-left:4px solid #222;
}

.side::after
{
    content:'';
    position:absolute;
    top: -20px;
    left:50%;
    transform: translateX(-50%);
    width:70px;
    height:40px;
    background:#333;
    background-image: linear-gradient(to right, transparent 10%, transparent 90%, #333 90%),
    linear-gradient(to bottom, transparent 01%, #6d6d7d 10%, #6d6d7d 90%);
    background-size:10px 15px;
    border:2px solid #333;
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
}

.side .line
{
    transform:translateY(-20px);
}


.windows
{
    position:absolute;
    top:62px;
    left:30px;
    width:80px;
    height:70px;
    background:#333;
    background-image: linear-gradient(to right, transparent 10%, transparent 90%, #333 90%),
    linear-gradient(to bottom, transparent 01%, #6d6d7d 10%, #6d6d7d 90%);
    background-size:10px 15px;
    border:2px solid #333;
    border-top:5px solid #333;
    border-bottom:5px solid #333;
}

.tree
{
    position:absolute;
    top:-10px;
    right:-120px;
    width:120px;
    height:120px;
    background:#94ab38;
    border-top-left-radius: 100px;
    border-bottom-right-radius: 100px;
    transform:rotate(315deg);
}

.tree::before
{
    content:'';
    position:absolute;
    top:85px;
    left:-20px;
    width:10px;
    height:100px;
    background:#3c2703;
    transform:rotate(45deg);
}

.tree2
{
    top:-50px;
    right:-70px;
    background:#7b921f;
    transform:rotate(315deg) scale(1.25);
}