:root {
    --branch-height: 7vh;
    --branch-width: 2.5vw;
    --leaf-width: 0.7rem;

}

@media (min-width:700px) {
    :root {
        --branch-height: 9vh;
        --branch-width: 1.5vw;
    }
}


.tree {
    position: relative;
    display: flex;
    align-items: end;
    left: calc(var(--home-1-window-size) + var(--home-2-width));
cursor: pointer;
}

.branches {
    position: relative;
    display: flex;
    width: var(--branch-width);
    height: var(--branch-height);
}

.branch {
    background: black;
    width: 100%;
    height: 100%;
    position: absolute;
}

.branch-1 {

    clip-path: polygon(0 0, 5% 0, 100% 100%, 0% 100%);
}

.branch-2 {
    clip-path: polygon(95% 0, 100% 0, 100% 100%, 0% 100%);
}

.branch-3 {
    clip-path: polygon(0 0, 5% 0, 40% 100%, 0% 100%);
    transform: rotate(-20deg);
    height: calc(var(--branch-height) / 2);

}

.branch-4 {
    clip-path: polygon(95% 0, 100% 0, 100% 90%, 50% 90%);
    transform: rotate(20deg);
    height: calc(var(--branch-height) / 2);
}

.leaves {
    height: var(--branch-height);
    bottom: calc(var(--branch-height));
    width: calc(var(--branch-width) *8);
    /*
left is half of its width
*/
    left: calc(var(--branch-width) * -4);
    position: absolute;
}

#leaf-box {
    position: relative;
    width: 100%;
    height: 100%;
}

.leaf {
    background: black;
    width: var(--leaf-width);
    aspect-ratio: 1;
    border-radius: var(--pritam);
    top: 10%;
    position: absolute;
    animation: fall 8s 1s forwards;
    opacity: 1;
}

@keyframes fall {

    100% {
        transform: translateY(18vh);
        opacity: 0;

    }
}