* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    background-color: lightpink;
    overflow: auto;
    position: relative;
}

.snow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.snowflake {
    position: absolute;
    top: -10%;
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    animation: fall linear infinite;
    opacity: 0.8;
}

.left {
    left: 0; /* Position on the left side */
}

.right {
    right: 0; /* Position on the right side */
}

.left:nth-child(1),
.left:nth-child(2),
.left:nth-child(3),
.left:nth-child(4),
.left:nth-child(5),
.left:nth-child(6),
.left:nth-child(7),
.left:nth-child(8),
.left:nth-child(9),
.left:nth-child(10) {
    left: 0; /* Keep all left snowflakes on the left */
}

.right:nth-child(11),
.right:nth-child(12),
.right:nth-child(13),
.right:nth-child(14),
.right:nth-child(15),
.right:nth-child(16),
.right:nth-child(17),
.right:nth-child(18),
.right:nth-child(19),
.right:nth-child(20) {
    right: 0; /* Keep all right snowflakes on the right */
}

.snowflake.left {
    animation: fall linear infinite; /* Use the left drift animation */
    animation-duration: calc(4s + (Math.random() * 2)); /* Random duration between 4s and 6s */
    animation-delay: calc(0s + (0.1s * var(--i))); /* Adjust delay as needed */
}

.snowflake.right {
    animation: fall-right linear infinite; /* Use the right drift animation */
    animation-duration: calc(4s + (Math.random() * 2)); /* Random duration between 4s and 6s */
    animation-delay: calc(0s + (0.1s * var(--i))); /* Adjust delay as needed */
}

.snowflake:nth-child(1) {
    left: 10%;
    animation-duration: 4s;
    animation-delay: 0s;
}

.snowflake:nth-child(2) {
    left: 20%;
    animation-duration: 5s;
    animation-delay: 1s;
}

.snowflake:nth-child(3) {
    left: 30%;
    animation-duration: 6s;
    animation-delay: 2s;
}

.snowflake:nth-child(4) {
    left: 40%;
    animation-duration: 4.5s;
    animation-delay: 0.5s;
}

.snowflake:nth-child(5) {
    left: 50%;
    animation-duration: 5.5s;
    animation-delay: 1.5s;
}

.snowflake:nth-child(6) {
    left: 60%;
    animation-duration: 6.5s;
    animation-delay: 2.5s;
}

.snowflake:nth-child(7) {
    left: 70%;
    animation-duration: 4s;
    animation-delay: 0.2s;
}

.snowflake:nth-child(8) {
    left: 80%;
    animation-duration: 5s;
    animation-delay: 1.2s;
}

.snowflake:nth-child(9) {
    left: 90%;
    animation-duration: 6s;
    animation-delay: 2.2s;
}

.snowflake:nth-child(10) {
    left: 50%;
    animation-duration: 5.5s;
    animation-delay: 1.5s;
}

@keyframes fall {
    0% {
        transform: translateY(0) translateX(0); /* Start position */
        opacity: 0.8;
    }
    50% {
        transform: translateY(50vh) translateX(-20px); /* Drift left */
        opacity: 0.8;
    }
    100% {
        transform: translateY(100vh) translateX(-40px); /* End position */
        opacity: 0;
    }
}

@keyframes fall-right {
    0% {
        transform: translateY(0) translateX(0); /* Start position */
        opacity: 0.8;
    }
    50% {
        transform: translateY(50vh) translateX(20px); /* Drift right */
        opacity: 0.8;
    }
    100% {
        transform: translateY(100vh) translateX(40px); /* End position */
        opacity: 0;
    }
}

.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    max-width: 800px;
    z-index: 1;
    position: relative;
}

h1 {
    margin-bottom: 20px;
    color: #4169E1 ;
    font-family: sans-serif;
}

h4, h3{
	text-align: center ;
	color: #5D3FD3 ;
    font-family: sans-serif;
    font-size: 22px;
}


p {
    margin-bottom: 15px;
    text-align: center;
    font-size: 19px;
}

.snow-hill {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 42vh; /* Height of the snow blanket */
    display: flex; /* Center the rectangle */
    justify-content: center; /* Center horizontally */
    align-items: flex-end; /* Align to the top */
    background: white; /* Solid white color for snow */
    z-index: 0; /* Ensure it's behind the content */
    transform: translateY(100px); /* Move down by 100 pixels */
}

.container {
    border-radius: 8px; /* Optional rounded corners */
    width: 80%;
    background-color: rgba(255, 255, 255, 0.9);
    margin: 0 auto;
    margin-bottom: 30px;
    padding: 50px;
    margin-top: 30px; /* Adjust the top margin as needed */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

h2 {
    margin-top: 20px;
    text-align: center;
}

img {
    pointer-events: none;
}

.downloads-container {
    border-radius: 8px; /* Optional rounded corners */
    width: 40%;
    background-color: rgba(255, 255, 255, 0.9);
    margin: 0 auto;
    padding: 20px;
    margin-bottom: 555px; /* Adjust the bottom margin as needed */
    margin-top: 10px; /* Adjust the top margin as needed */
    margin-left: 23%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

.static-image {
    position: absolute;
    max-width: 40%; /* Make the image responsive */
    height: auto; /* Maintain aspect ratio */
    right: 0;
    bottom: 0;
    z-index: 9999;
}

.button-container {
    z-index:999;
    display: flex; /* Enable flexbox */
    justify-content: center; /* Center items horizontally */
    margin: 20px 0; /* Space above and below the button */
}

.home-button {
    padding: 10px 20px; /* Padding inside the button */
    background-color: springgreen; /* Button background color */
    color: magenta; /* Text color */
    text-decoration: none; /* Remove underline */
    border-radius: 5px; /* Rounded corners */
    font-size: 1rem; /* Font size */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
}

.home-button:hover {
    background-color: #e7e7e7; /* Light gray on hover for better contrast */
}

@media (max-width: 600px) {
    .container {
        width: 90%; /* Make the container wider on small screens */
    }
    .downloads-container {
        width: 90%; /* Adjust downloads container width */
    }
    .home-button {
        width: 80%; /* Make the button wider */
    }
}