body, html {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Estilo para el overlay con el JPG de fondo */
#overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    /*background-color: rgba(0, 0, 0, 0.8); /* Fondo oscuro semitransparente */
    justify-content: center;
    align-items: center;
    z-index: 99;
}
#overlay img {
    max-width: 100%;
 }


#message {
    position: absolute;
    color: white;
    font-size: 2rem;
    text-align: center;
    width: 100%;
    top: 50px;
}

 
.webcam-view {
    /*width: 100vw;
    height: 100vh;*/
}



/* Niebla que se mueve de izquierda a derecha */
#fog {
    display: none;
    position: absolute;
    bottom: 0;
    top: 0;
    width: 100%;
    height: auto;
    background-image: url('img/fog.png'); /* Imagen de la niebla */
    background-size: contain;
    animation: fog-move 500s linear infinite;
    z-index: 9999;
}

/* Animación de la niebla */
@keyframes fog-move {
    0% {
        background-position: 0% 0;
    }
    50% {
        background-position: 500% 0;
    }
}

/* Araña animada que baja y sube */
#spider {
    position: absolute;
    width: 6.5%;
    height: auto;
    top: -100%; /* Empieza fuera de la pantalla */
    z-index: 9999;
 }

/* Animación para que la araña baje y suba */
@keyframes spider-drop {
    0%, 100% {
        top: -100%; /* Fuera de la pantalla */
    }
    50% {
        top: 0; /* Baja hasta casi el fondo de la pantalla */
    }
}