body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}
  
.screensaver {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
  
.sky {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #0000ff, #87ceeb); /* Gradient background from dark blue to light blue for the sky */
}
  
.stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('stars.png');
    animation: twinkle 10s infinite alternate;
}
  
.moon {
    position: absolute;
    top: 50px;
    right: 50px;
    width: 100px; /* Adjust the size of the moon */
    height: 100px; /* Adjust the size of the moon */
    background-color: #f2f2f2; /* Color of the moon */
    border-radius: 50%;
    box-shadow: 0 0 100px 30px #f2f2f2; /* Glow effect around the moon */
    animation: glowMoon 5s infinite alternate;
}
  
@keyframes glowMoon {
    0% {
        box-shadow: 0 0 100px 30px #f2f2f2; /* Initial glow effect */
    }
    100% {
        box-shadow: 0 0 150px 50px #f2f2f2; /* Increased glow effect */
    }
}
  
.grass {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10px; /* Adjust the height of the grass */
    background-color: #2E8B57; /* Green color for the grass */
}
  
.forest {
    position: absolute;
    bottom: 10px; /* Adjust the bottom position to match the grass */
    left: 0;
    width: 100%;
    height: 90%; /* Adjust the height of the forest */
}
  
.tree {
    position: absolute;
    bottom: 0;
    width: 20px; /* Width of each tree */
    height: 60px; /* Height of each tree */
    background-color: #8B4513; /* Brown color for the tree trunk */
    border-radius: 8px;
}
  
.tree:before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 50px; /* Width of the tree crown */
    height: 50px; /* Height of the tree crown */
    background-color: #0A2A0A; /* Dark green color for the tree crown */
    border-radius: 50%;
    transform: translateX(-50%);
}
  
.tree:nth-child(odd) {
    left: calc(0% - 10px); /* Adjust the position of the first tree */
}
  
.tree:nth-child(even) {
    left: calc(20% - 10px); /* Adjust the position of the second tree */
}
  
.tree:nth-child(3n+1) {
    left: calc(40% - 10px); /* Adjust the position of the third tree */
}
  
.tree:nth-child(3n+2) {
    left: calc(60% - 10px); /* Adjust the position of the fourth tree */
}
  
.tree:nth-child(3n+3) {
    left: calc(80% - 10px); /* Adjust the position of the fifth tree */
}
  
@keyframes twinkle {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.8;
    }
}

.house {
    position: absolute;
    bottom: 0;
    left: calc(5%); /* Adjust the position of the house */
    width: 80px; /* Adjust the width of the house */
    height: 80px; /* Adjust the height of the house */
}

.roof {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-left: 40px solid transparent; /* Half the width of the house */
    border-right: 40px solid transparent; /* Half the width of the house */
    border-bottom: 40px solid #8B4513; /* Brown color for the roof */
}
  
.body {
    position: absolute;
    top: 40px; /* Adjust the position of the body */
    left: 0;
    width: 100%;
    height: 40px; /* Adjust the height of the body */
    background-color: #ffffff; /* White color for the body */
    border-radius: 0 0 10px 10px;
}
  
.door {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px; /* Adjust the width of the door */
    height: 15px; /* Adjust the height of the door */
    background-color: #00008B; /* Dark blue color for the door */
}
  
.window {
    position: absolute;
    top: 10px; /* Adjust the position of the window */
    width: 20px; /* Adjust the width of the window */
    height: 20px; /* Adjust the height of the window */
    background-color: #a9a9a9; /* Grey color */
    border-radius: 4px;
    margin: 0 5px;
}