div.modal {
	display: none;
	width: 100%;
	height: 100%;
}
div.modal.open {
	display: flex;
	position: fixed;
	z-index: 200;
	left: 0;
	top: 0;
	overflow: auto;
	background-color: var(--theme-1-low);
}

div.modal div.content {
	display: block;
	position: relative;
}
div.modal.open div.content {
	background-color: var(--theme-2);
	margin: auto;
	padding: 20px;
	width: calc(50% - 2 * 16px);
	border-radius: 12px;
}
div.modal div.content span.close {
	display: none
}
div.modal.open div.content span.close {
	position: absolute;
	display: block;
	top: 0;
	right: 0;
	margin: 12px;
	color: var(--contrast-2);
	font-size: 24px;
	cursor: pointer;
	width: 24px;
	height: 24px;
	text-align: center;
}

@media (hover: hover) and (pointer: fine) {
	div.modal.open div.content span.close:hover {
		color: var(--contrast-1);
	}
}

@media only screen and (max-width: 1800px) {

	div.modal.open div.content {
		width: calc(75% - 2 * 16px);
	}

}

@media only screen and (max-width: calc(5 * 164px + 106.5px + 63.5px)) { /* n * var(--tab-width), where n num of pages plus sports plus some tol = 970 */

	div.modal.open div.content {
		width: calc(100% - 2 * 16px);
	}

}