:root {
	background-color: white;
}

body,
dialog {
	color: black;
}

.main-header {
	display: flex;
	flex-direction: row;
	font-family: sans-serif;
}

.spacer {
	flex-grow: 1;
}

.settingsButton {
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;

	display: block;
	width: fit-content;
}

.js-draw.imageEditorContainer {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
}

/* Dialogs */
.dialog-background {
	display: flex;
	justify-content: center;
	align-items: center;

	position: fixed;

	top: 0;
	left: 0;
	bottom: 0;
	right: 0;

	width: 100%;
	height: 100%;
	padding: 0;
	border: none;

	background-color: rgba(0, 0, 0, 0.2);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.dialog-background .dialog {
	background-color: #ffe;
	border-radius: 4px;

	max-height: 90vh;
	overflow-y: auto;

	box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 3px;

	font-family: sans-serif;
	padding: 20px;
}

/* Container for the save popup. */
.popupContainer iframe {
	width: 100vw;
	height: 100vh;

	border: none;
	padding: 0;
	margin: 0;

	background-color: rgba(0, 0, 0, 0);
}

.popupContainer {
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	right: 0;

	padding: 0;

	background-color: transparent;
	border: none;

	--backdrop-filter: blur(6px) contrast(150%);
	backdrop-filter: var(--backdrop-filter);
	-webkit-backdrop-filter: var(--backdrop-filter);
}

.error-container {
	display: none;
	background-color: #ffbbbb;
	color: black;
	padding: 4px;
	border-radius: 4px;

	font-family: sans-serif;
}

.error-container li::before {
	content: '❗';
}

.error-container.has-errors {
	display: block;
}

@media (prefers-color-scheme: dark) {
	:root {
		background-color: black;
	}

	body,
	dialog {
		color: white;
	}

	a {
		color: pink;
	}

	a:visited {
		color: #cc7e6a;
	}

	#editorOptions {
		background-color: #222;
	}

	.dialog-background .dialog {
		background-color: #111;
	}

	.error-container {
		color: white;
		background-color: #500;
	}
}