:root{
    /* --backGround: rgba(21, 56, 61, .8); este es el color y opacidad para el resto de la pantalla; */
    --backGround: rgba(250, 250, 250, .8); /* este es el color y opacidad para el resto de la pantalla */;
    --foreGround: rgb(20, 23, 29); /* este es el color de la pantalla modal*/
    --borderColor: rgb(0,0,0);
}

/* Formato de pantalla modal */
.modal{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--backGround);
    justify-content: center;
    align-items: center;
}

.modal-content{
    background-color: var(--foreGround); 
    padding: 10px;
    border-radius: 5px;
    width: 80%;
    max-width: 500px;
    position: relative;
    border: 2px solid var(--borderColor); /* este es el color del borde de la pantalla modal*/
    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.8);
}

.modal-content h2{
    padding-bottom: 20px;
}

.modal-content .buttonsDiv {
  display: flex; /* Coloca los botones en línea */
  gap: 15px;      /* Espacio de separación entre cada botón */
  justify-content: center; /* Alinea a la izquierda (por defecto) */

}

.buttonsDiv button {
    cursor: pointer;
}