.modal {
    position: 			fixed; /* O 'absolute' para que se mueva con el scroll */
    top: 				0;
    left: 				0;
    width: 				100vw;    /* 100% del ancho del viewport */
    height: 			100vh;   /* 100% del alto del viewport */
    z-index: 			9999;   /* Asegura que esté por encima de otros elementos */
    background-color: 	rgba(0, 0, 0, 0.8); /* Opcional: fondo oscuro */
	font-family:        Arial, Helvetica, sans-serif;
}

.modal > div {
	display: 			block;
	position: 			absolute;
	top: 				50%;
	left: 				50%;
	transform: 			translate(-50%, -50%); /* Mueve el div hacia atrás la mitad de su propio tamaño */
	padding: 			5%;
	width: 				400px;
	text-align: 		center;
	background-color: 	var(--deg3);
	border-radius:  	10px;
}

.modal h3 {
	text-align: 		center;
}

.modal button {
	width: 				120px;
	padding: 			2%;
	background-color: 	brown;
	color: 				white;
	border-radius: 		4px;
	border: 			none;
}

.modal button:hover {
    cursor:             pointer;
    filter:             brightness(.9);
}

@media all and (orientation: portrait) {

    .modal > div {
        width: 				80%;
    }

}