.modal-background {
	/*display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 3; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-frame {
	min-height: 100px;
	min-width: 100px;
	background-color: #fefefe;
	margin: 50px auto;
	padding: 20px;
	border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.modal-close {
	color: #aaaaaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

.modal-close:hover,
.modal-close:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
}

@media (prefers-color-scheme: dark) {
	.modal-background {
		background-color: rgba(1,1,1,0.4); /* Black w/ opacity */
	}

	/* Modal Content */
	.modal-frame {
		background-color: #060606;
		border: 1px solid #444;
	}

	/* The Close Button */
	.close {
		color: #555555;
	}

	.close:hover,
	.close:focus {
		color: #fff;
	}
}