@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Outfit', sans-serif;
}

body {
    background: url('bg.jpg') center 35% / cover no-repeat fixed;
    background-color: #000;
    color: #ffffff;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: relative;
    margin: 0;
    /* Xira qilmasdan faqat kamerani yuqoriga/pastga chiroyli harakatlantirish */
    animation: cameraPan 20s ease-in-out infinite alternate;
}

@keyframes cameraPan {
    0% {
        background-position: center 35%;
    }

    100% {
        background-position: center 38%;
    }
}

#nature-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 10;
}

/* Telefonlar uchun mobil responsiv */
@media (max-width: 768px) {
    body {
        background-position: 58% center;
        animation: cameraPanMobile 20s ease-in-out infinite alternate;
    }
}

@keyframes cameraPanMobile {
    0% {
        background-position: 55% center;
    }

    100% {
        background-position: 62% center;
    }
}