html {
    margin: 0px;
    padding: 0px;
    height: 100%;
}

body {
    font: 14px 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, 'Liberation Sans', sans-serif;
    margin: 0;
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, 'Liberation Sans', sans-serif;

    background-color: #87CEEB;
    /*    background-color: #246fa8;
*/
    background-attachment: fixed;
    background-size: 100% 100%;
    /*background: linear-gradient(to bottom, #2d91c2 0%,#1e528e 100%);*/
    /* background: linear-gradient(to bottom, #57c1eb 0%,#246fa8 100%);*/
    /*background: linear-gradient(115deg, #62cff4, #2c67f2);
    /*background: linear-gradient(to bottom, #87CEEB 0%, #b0e0e6 100%);*/
    /*background: linear-gradient(to bottom,
        #87CEEB 0%,
        #87CEEB 50%,
        #ADD8E6 65%,
        #90EE90 80%,
        #556B2F 100%
    );*/

    /*
    background: linear-gradient(to bottom,
        #87CEEB 0%, 
        #87CEEB 40%, 
        #ADD8E6 50%, 
        #ADD8E6 60%,
        #90EE90 70%,
        #6B8E23 85%,
        #556B2F 100%
    );*/



    /*
    background: linear-gradient(to bottom,
        #2c3e50 0%,    
        #4a6c8e 20%,   
        #f09242 45%,    
        #f7b32b 55%,    
        #8bc34a 70%,    
        #689f38 85%,    
        #4e342e 100%    
    );*/

    /*
    
    ackground: 
        url('https://www.transparenttextures.com/patterns/textured-paper.png'),
        linear-gradient(to bottom,
            #FF6B35 0%,
            #F7931E 20%,
            #FFD23F 40%,
            #87CEEB 60%,
            #4682B4 80%,
            #2F4F4F 100%
        );
    background-attachment: fixed;
    background-size: 150px 150px, 100% 100%;
    */

    
    color: #f0f0f0;
    min-height: 100vh; 
    position: relative;
    overflow-x: hidden;
    display: flex; 
    flex-direction: column;
    width: 100%;
}

a {
  color: #00B7FF;
}

.grass-animation {
    width: 100%;
    height: 200px;
    position: relative;
    margin-top: auto; 
    z-index: 1;
}

#grassCanvas { 
    display: block; 
    width: 100%;
    height: 100%; 
}

.background-clouds-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; 
    pointer-events: none; 
}

.cloud-bg {
    position: absolute;
    background: white; 
    border-radius: 50px;
    animation: cloudFloatBG 30s ease-in-out infinite;
}

.cloud-bg.cloud1 {
    width: 150px;
    height: 60px;
    left: -5%;
    top: 15%;
    animation-delay: 0s;
}

.cloud-bg.cloud2 {
    width: 200px;
    height: 80px;
    left: 82%;
    top: 35%;
    animation-delay: 8s;
}

.cloud-bg.cloud3 {
    width: 120px;
    height: 50px;
    left: 30%;
    top: 60%;
    animation-delay: 15s;
}

.cloud-bg.cloud4 {
    width: 180px;
    height: 70px;
    left: 50%;
    top: 10%;
    animation-delay: 20s;
}

.cloud-bg.cloud5 {
    width: 220px;
    height: 90px;
    left: 100%; 
    top: 70%;
    animation-delay: 25s;
}


.background-clouds-container {
    position: absolute;
    top: -100px; 
    left: -100px; 
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

.cloud-bg::before {
    content: '';
    position: absolute;
    background: white;
    border-radius: 50px;
}

.cloud-bg.cloud1::before {
    width: 80px;
    height: 80px;
    top: -30px;
    left: 20px;
}

.cloud-bg.cloud2::before {
    width: 100px;
    height: 100px;
    top: -40px;
    left: 30px;
}

.cloud-bg.cloud3::before {
    width: 60px;
    height: 60px;
    top: -25px;
    left: 20px;
}

.cloud-bg.cloud4::before {
    width: 90px;
    height: 90px;
    top: -35px;
    left: 25px;
}

.cloud-bg.cloud5::before {
    width: 110px;
    height: 110px;
    top: -45px;
    left: 35px;
}

@keyframes cloudFloatBG {
    0%, 100% { transform: translateX(0px) translateY(0px); }
    25% { transform: translateX(-40px) translateY(15px); }
    50% { transform: translateX(30px) translateY(-10px); }
    75% { transform: translateX(-20px) translateY(12px); }
}

@media screen and (max-width: 1500px) {
    .cloud-bg.cloud5 {
        width: 220px;
        height: 90px;
        left: 80%; 
        top: 70%;
        animation-delay: 25s;
    }
}