/* styles.css */
#video-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw; /* Ancho total del dispositivo */
    height: 25vh; /* Alto aproximadamente el 25% del dispositivo */
    overflow: hidden; /* Oculta cualquier contenido que se desborde */
    background-color: #000; /* Opcional, para un fondo negro si el video está vacío */
    position: relative; /* Necesario para posicionar el video correctamente */
}

#camera-feed {
    width: 100%; /* Ancho completo del contenedor */
    height: 100%; /* Alto completo del contenedor */
    object-fit: cover; /* Asegura que el video cubra el contenedor sin distorsión */
}

/* Ajustes para dispositivos móviles */
@media (max-width: 768px) {
    #video-container {
        width: 90vw; /* Asegura que el contenedor ocupe todo el ancho en pantallas pequeñas */
        height: 18vh; /* Mantiene el alto como el 10% del dispositivo */
    }
}