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

body{
    overflow:hidden;
    font-family:Poppins,sans-serif;
}

.hero-bg{

    position:relative;
    width:100%;
    height:100vh;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #c0ffb4 0%,
        #47cf61bf 40%,
        #05802C 100%
    );
}

/* ======================= */
/* SUN */
/* ======================= */

.sun{

    width:280px;
    height:280px;

    background:#fff8bb;

    border-radius:50%;

    position:absolute;

    top:-80px;
    right:8%;

    filter:blur(10px);

    animation:pulse 6s infinite;
}

/* ======================= */
/* GLOW */
/* ======================= */

.glow{

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    opacity:.5;
}

.glow1{

    width:400px;
    height:400px;

    background:#7dff9d;

    left:-120px;
    top:120px;

    animation:moveGlow1 12s infinite alternate;
}

.glow2{

    width:300px;
    height:300px;

    background:#c4ffc9;

    right:-80px;
    bottom:120px;

    animation:moveGlow2 10s infinite alternate;
}

/* ======================= */
/* LEAF */
/* ======================= */

.leaf{

    position:absolute;

    font-size:30px;

    opacity:.4;

    animation:floating 8s infinite ease-in-out;
}

.leaf1{

    top:10%;
    left:12%;
}

.leaf2{

    top:35%;
    right:15%;
}

.leaf3{

    bottom:30%;
    left:18%;
}

.leaf4{

    bottom:18%;
    right:30%;
}

.leaf5{

    top:60%;
    left:60%;
}

/* ======================= */
/* PARTICLE */
/* ======================= */

.particle{

    width:8px;
    height:8px;

    border-radius:50%;

    background:white;

    position:absolute;

    opacity:.5;

    animation:particles 10s linear infinite;
}

.p1{left:8%;bottom:10%;}
.p2{left:25%;bottom:0;}
.p3{left:50%;bottom:5%;}
.p4{left:75%;bottom:15%;}
.p5{left:90%;bottom:0;}

/* ======================= */
/* HILL */
/* ======================= */

.hill{

    position:absolute;

    bottom:0;

    width:60%;

    height:220px;

    background:#046622;

    border-radius:50%;
}

.hill1{

    left:-10%;
}

.hill2{

    right:-10%;

    background:#057528;
}

.grass{

    position:absolute;

    width:100%;

    height:90px;

    bottom:0;

    background:#024c18;
}

/* ======================= */
/* TEXT */
/* ======================= */

h1{

    letter-spacing:6px;

    text-shadow:0 10px 20px rgba(0,0,0,.2);
}

p{

    max-width:700px;

    margin:auto;
}

/* ======================= */
/* ANIMATION */
/* ======================= */

@keyframes floating{

    0%{

        transform:
        translateY(0)
        rotate(0deg);
    }

    50%{

        transform:
        translateY(-25px)
        rotate(10deg);
    }

    100%{

        transform:
        translateY(0)
        rotate(0deg);
    }

}

@keyframes pulse{

    0%{

        transform:scale(1);
    }

    50%{

        transform:scale(1.08);
    }

    100%{

        transform:scale(1);
    }

}

@keyframes particles{

    from{

        transform:translateY(0);
        opacity:.6;
    }

    to{

        transform:translateY(-100vh);
        opacity:0;
    }

}

@keyframes moveGlow1{

    from{

        transform:translate(0,0);
    }

    to{

        transform:translate(100px,-50px);
    }

}

@keyframes moveGlow2{

    from{

        transform:translate(0,0);
    }

    to{

        transform:translate(-100px,80px);
    }

}