.modal {
	text-align: left;
	position: fixed;
	opacity: 0;
	visibility: hidden;
	z-index: 1;
	left: 0;
	top: 0;
	width: calc(100cqw);
	height: calc(100cqh);
	overflow: auto;
	background-color: rgba(0,0,0,0.4);

	.modal-wrapper {
		margin: calc(10cqh) auto;
		border: 0.1em solid var(--border-secondary);
		width: calc(80cqw - 4em);
		max-width: 60em;
		height: calc(80cqh - 6em); /* the -6em shouldn't be required */
		position: relative;
	}

	.modal-header {
		padding: 0.1em 1em;
		background-color: var(--background);
		align-items: center;
		display: flex;
		justify-content: space-between;
		height: 3em;

		h2, h3, h4 {
			font-family: var(--heading-font);
		}

		.close {
			font-size: 2em;
			font-weight: bold;
		}

		.close:hover,
		.close:focus {
			color: var(--highlight);
			text-decoration: none;
			cursor: pointer;
		}
	}

	.modal-body {
		background-color: var(--background-secondary);
		padding: 1em 1.5em;
		height: calc(100% - 5.2em);
		overflow-y: scroll;
	}
}

.modal.show {
	opacity: 1;
	visibility: visible;
}