/* AJUSTAR EL FONDO */
main, .background{
    height: 120vh;
}

/* CAMBIAR EL BACKGROUND */
.background{
    background: url(../media/backgrounds/B1.jpg);
    background-size: cover;
    background-position: center;
    animation: moveBackgorund 30s infinite;
    
}


/* NOMBRE */
.titulo h1{
    font-size: 46px;
    color: rgb(0, 162, 255);
}

/* CUMPLE */
.titulo h2{
    color: rgb(255, 255, 255);
}
/* IMAGEN NUMERO */
.titulo img{
    width: 200px;
}

/* FECHA */
.fecha span{
    color: rgb(255, 255, 255);
}
.countdown-container{
    border: 4px solid #df3b3b;
    background: rgba(0, 0, 0, 0.438); /* Fondo translúcido */
    border-radius: 10px; /* Borde redondeado */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); /* Sombra suave */
    -webkit-backdrop-filter: blur(50px); /* Fondo desenfocado */
    color: #df3b3b;

}

/* VESTIMENTA */
.vestimenta img{
    width: 70px;
}

.vestimenta span{
    color: rgb(255, 255, 255);
}


/* BOTONES */
.buttons a{
    color: aliceblue;
    height: 40px;
    padding: 10px;
    border-radius: 5px;
    background-color: rgb(0, 119, 255);
    gap: 5px;
}

/* lEYENDA */
.leyenda span{
    color: rgb(255, 255, 255);
    font-size: 26px;
}


/* DECORATIONS */

.img1{
    width: 250px;
    /* transform: translateY(100px) translateX(-150px) rotate(20deg); */
    animation: img1Animate 5s infinite;
}

.img2{
    width: 350px;
    /* transform: translateY(100px) translateX(200px) rotate(-35deg); */
    animation: img2Animate 10s infinite;
}

.img3{
    width: 150px;
    /* transform: translateY(20px) translateX(90px) rotate(-35deg); */
    animation: img3Animate 10s infinite;
}

.img4{
    width: 250px;
    /* transform: translateY(50px) translateX(-150px) rotate(20deg); */
    animation: img4Animate 5s infinite;
}


@keyframes img1Animate {
    0%{
        transform: translateY(100px) translateX(-150px) rotate(20deg);
    }
    50%{
        transform: translateY(100px) translateX(-140px) rotate(40deg);
    }
    100%{
        transform: translateY(100px) translateX(-150px) rotate(20deg);
    }
}


@keyframes img2Animate {
    0%{
        transform: translateY(100px) translateX(200px) rotate(-35deg);
    }
    50%{
        transform: translateY(100px) translateX(200px) rotate(-15deg);
    }
    70%{
        transform: translateY(-500px) translateX(200px) rotate(-15deg);
    }
    100%{
        transform: translateY(100px) translateX(200px) rotate(-35deg);
    }
}


@keyframes img3Animate {
    0%{
        transform: translateY(20px) translateX(90px) rotate(-35deg);
    }
    50%{
        transform: translateY(-200px) translateX(90px) rotate(-15deg);
    }
    100%{
        transform: translateY(20px) translateX(90px) rotate(-35deg);
    }
}

@keyframes img4Animate {
    0%{
        transform: translateY(50px) translateX(-150px) rotate(20deg);
    }
    50%{
        transform: translateY(-150px) translateX(-100px) rotate(40deg);
    }
    100%{
        transform: translateY(50px) translateX(-150px) rotate(20deg);
    }
}