body {
    background-color: #1b1b1b;
    margin: 20px;
}

.moon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(to top, #dfdf00, #e9e956,#c7a200);
}

.cloud{ 
    width:350px;
    height:120px;
    background:#ECEFF1;
    box-shadow: 10px 10px rgba(0,0,0,0.2);
 }

 .cloud:after, .cloud:before{
    content:"";
    position:relative;
    display:inline-block;
    background:inherit;
    border-radius:inherit;
}

.cloud::after{
    width:100px;
    height:100px;
    top:-220px;
    left:50px;
}
.cloud::before{
    width:180px;
    height:180px;
    top: -70px;
    left:130px;
}

.tree{
    width: 100px;
    height: 200px;
    background: linear-gradient(
        to top,
        #663701,
        #614803,
        #098633,
        #00a02d,
        #1fff50
    );
    clip-path: polygon(
        50% 0,
        75% 15%,
        55% 10%,
        80% 30%,
        60% 25%,
        85% 50%,
        65% 45%,
        100% 70%,
        55% 60%,
        55% 100,
        45% 60%,
        0% 70%,
        35% 45%,
        15% 50%,
        40% 25%,
        20% 30%,
        45% 10%,
    );