#mensaje-emergente {
    /* Posicionaremos el mensaje en el centro de la ventana */
    position: absolute;
    top: 80%; left: 75%;
    /* Configuramos ancho y alto deseado */
    width: 22em; height: 100px;
    /* Ahora debemos desplazar la mitad del ancho y alto */
    margin-left: -75px; margin-top: -50px;
    /* Inicialmente debe estar oculto */
    visibility: hidden;
    opacity: 0;
    /* Animamos la salida de la invisibilidad y opacidad */
    transition: visibility 0s, opacity 0.5s linear;
    /* Configuramos el aspecto del mensaje */
    border-radius: 8px;
    border: 4px solid var(--bordermain);
    background-color: var(--bg);
    color: var(--main);
    padding: 5px 10px;
    /* Centramos el texto del contenido */
    display: flex;
    justify-content: center;
    align-items: center;
}
@media screen and (max-width: 980px) {
    #mensaje-emergente {
        /* Posicionaremos el mensaje en el centro de la ventana */
        top: 90%; left: 35%;
    }
}