.hidden-phone {
    color: #eee; /* Cambia el color del texto a blanco para ocultarlo */
    background-color: #eee; /* Asegúrate de que el fondo también sea blanco */
    text-decoration: none; /* Opcional: para quitar el subrayado */
}





/* Estilo general para los videos */
.responsive-video {
    width: 100%;
    height: auto; /* Mantiene la relación de aspecto del video */
    max-width: 100%; /* Asegura que el video no se expanda más allá del contenedor */
    display: block; /* Elimina espacios extra debajo del video */
}



/* Opcional: Estilo para contenedores que pueden ser más grandes que el video */
.video-container {
    position: relative;
    width: 100%;
    height: auto; /* Ajusta la altura según la relación de aspecto del video */
    overflow: hidden; /* Oculta cualquier desbordamiento del video */
}



/* Estilos para la cuadrícula de imágenes */
.image-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Ajusta el espacio entre los elementos de la cuadrícula */
}

.postedImage {
    flex: 1 1 calc(33.333% - 20px); /* Ajusta el ancho de cada imagen/video en una cuadrícula de 3 columnas */
    box-sizing: border-box; /* Incluye el padding y el border en el ancho total */
    margin-bottom: 10px; /* Espacio inferior entre las filas */
}

/* Ajustes para tabletas */
@media (max-width: 1024px) and (min-width: 768px) {
    .postedImage {
        flex: 1 1 calc(50% - 20px); /* Dos columnas en pantallas de tabletas */
    }
}

/* Ajustes para móviles grandes */
@media (max-width: 768px) {
    .postedImage {
        flex: 1 1 calc(50% - 20px); /* Dos columnas en pantallas de móviles grandes */
    }
}

/* Ajustes para móviles pequeños */
@media (max-width: 480px) {
    .postedImage {
        flex: 1 1 100%; /* Una columna en pantallas de móviles pequeños */
    }
}



/*-------------------------------------------*/
.blinking {
    animation: blinking 1.5s infinite;
}

@keyframes blinking {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

/*-------------------------------------------*/

@keyframes colorChange {
    0% {
        color: green;
    }
    50% {
        color: red;
    }
    100% {
        color: green;
    }
}


/*------------------------------------*/
/* Animación de zoom y movimiento lateral hacia ambos lados */
@keyframes zoomMoveAnimation {
    0% {
        transform: scale(1) translateX(0); /* Posición inicial */
    }
    25% {
        transform: scale(1.05) translateX(10px); /* Zoom y desplazamiento a la derecha */
    }
    50% {
        transform: scale(1) translateX(0); /* Vuelve a la posición inicial */
    }
    75% {
        transform: scale(1.05) translateX(-10px); /* Zoom y desplazamiento a la izquierda */
    }
    100% {
        transform: scale(1) translateX(0); /* Vuelve a la posición inicial */
    }
}

.animated-image {
    animation: zoomMoveAnimation 5s ease-in-out infinite; /* Duración de 5 segundos, efecto continuo */
    border-radius: 10px; /* Opcional: bordes redondeados */
}

/* Opcional: organizar las imágenes en cuadrícula */
.image-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.postedImage {
    flex: 1 1 calc(33.333% - 10px); /* Tres imágenes por fila */
    box-sizing: border-box;
}



/* Animación de rotación */
@keyframes rotate {
    0% {
        transform: rotate(0deg); /* Comienza sin rotar */
    }
    100% {
        transform: rotate(360deg); /* Rota 360 grados */
    }
}


/* Aplicar la animación a la imagen de perfil------------------------ */

.rotating-profile {
    animation: rotate 5s linear infinite; /* Duración de 5 segundos, rotación continua */
    border-radius: 50%; /* Para asegurarse de que la imagen sea redonda */
}