body {
	margin: 0;
	padding: 0;
	background-image: linear-gradient(to bottom, #00111a, #00334d, #005580);
	background: url("https://hagall-media.de/cp/forest3.jpg") repeat-x;
	background-position: center bottom;
	background-size: cover;
	overflow: hidden;
	height: 100vh;
	width: 100vw;
	position: relative;
}

canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#snow-canvas-1 {
	z-index: 6;
}
#snow-canvas-2 {
	z-index: 5;
}
#snow-canvas-3 {
	z-index: 4;
}
#snow-canvas-4 {
	z-index: 3;
}
#snow-canvas-5 {
	z-index: 2;
}
#snow-canvas-6 {
	z-index: 1;
}

.clouds-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0; /* Qatlamlar ustida joylashganligiga e'tibor bering */
    background: url("https://hagall-media.de/cp/clouds.png") repeat-x;
    background-size: cover;
    animation: moveClouds 200s linear infinite;
    backdrop-filter: saturate(200%);
    mix-blend-mode: plus-lighter;
}


@keyframes moveClouds {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: -2000px 0;
	}
}



@media (max-width: 768px) {
    .centered-text {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .centered-text {
        font-size: 1.5rem;
    }
}

.centered-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: white;
    text-align: center;
    font-family: 'Arial', sans-serif;
    z-index: 7;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
    opacity: 1; /* Matn har doim ko'rinadi */
    animation: fadeIn 3s ease-out forwards, pulse 2s infinite ease-in-out;
}

/* Fade-in animatsiyasi: Matn paydo bo'ladi va qoladi */
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -55%);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* Pulse animatsiyasi: Yorug'lik pulsatsiyasi */
@keyframes pulse {
    0%, 100% {
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7), 0 0 10px rgba(255, 255, 255, 0.7);
    }
    50% {
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7), 0 0 20px rgba(255, 255, 255, 1);
    }
}