.graphic {
    position: relative;
    display: grid;
    padding-top: 3rem;
    grid-template-columns: 1fr 60%;
}

.graphic-arbol{
    width: 100%;
    grid-column-start: 2;
    z-index: 1
}

.absolute{
    position: absolute;
    /* display: none; */
}


.graphic-energy {
    position: absolute;
    width: 10%;
    mix-blend-mode: screen;
    top: -34%;
    right: 20%;
    animation: turn1 80s linear infinite;

}




.graphic-logo{
    position: absolute;
    width: 100%;
    mix-blend-mode: screen;
    top: 14%;
    right: 0%;
}



.graphic-logo2{
    position: absolute;
    width: 160%;
    mix-blend-mode: screen;
    top: 41%;
    right: -60%;
}
.graphic-logo3{
    position: absolute;
    width: 170%;
    mix-blend-mode: screen;
    top: 38%;
    right: 99%;
}
.graphic-logo4{
    position: absolute;
    width: 100%;
    mix-blend-mode: screen;
    top: 22%;
    right: 208%;
}

.graphic-santa{
    position: absolute;
    width: 70%;
    /* mix-blend-mode: screen; */
    top: 27%;
    right: 171%;
    filter: drop-shadow(4px 4px 15px rgb(255, 255, 255));

}

.graphic-estrella{
    position: absolute;
    width: 18%;
    /* mix-blend-mode: screen; */
    top: 4%;
    right: 21%;
    z-index: 2;
    filter: drop-shadow(4px 4px 15px rgb(255, 255, 255));
    animation: palpitar 3s linear infinite alternate;
    will-change: transform;
}
.graphic-estrella2{
    position: absolute;
    width: 18%;
    /* mix-blend-mode: screen; */
    top: 41%;
    right: 37%;
    z-index: 2;
    filter: drop-shadow(4px 4px 15px rgb(255, 255, 255));
    animation: palpitar 4s linear infinite alternate;
    will-change: transform;
}
.graphic-estrella3{
    position: absolute;
    width: 18%;
    /* mix-blend-mode: screen; */
    top: 41%;
    right: 5%;
    z-index: 2;
    filter: drop-shadow(4px 4px 15px rgb(255, 255, 255));
    animation: palpitar 5s linear infinite alternate;
    will-change: transform;
}


.graphic-circles{
    height: 100%;
    aspect-ratio: 1 / 1;
    mix-blend-mode: screen;
}

.graphic-circles img{
    width: 100%;
    height: 100%;
}


@keyframes turn1 {
    to {
        transform: rotate(1turn);
    }
}

@keyframes palpitar {
    0%{
        transform: rotate(1deg) scale(0.1);
    }
    
    
}

@keyframes caida {
    
    100%{
        opacity: 0;
        transform: translateY(9000px);
    }
}

/* @keyframes subida {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
} */