@media (prefers-color-scheme: dark) {
	:root {
		--bg-color: hsl(213, 10%, 17%);
		--light-bg-color: hsl(213, 10%, 23%);
		--highlight-bg-color: hsl(213, 10%, 28%);
		--fg-color: #ccc;
		--border-color: #888;
		--error-bg-color: hsl(0, 38%, 30%);
		--img-filter: ;
	}
}

@media (prefers-color-scheme: light) {
	:root {
		--bg-color: #eee;
		--light-bg-color: #ddd;
		--highlight-bg-color: #ccc;
		--fg-color: #666;
		--border-color: #888;
		--error-bg-color: hsl(0, 38%, 70%);
		--img-filter: invert(1);
	}
}

*
{
	box-sizing: border-box;
}

html, body {
	margin: 0;
}

body {
	background-color: var(--bg-color);
	color: var(--fg-color);
	padding: 12px;
	font-size: 16px;
}

h1 {
	margin: 0 0 16px 0;
}

h1 img {
	height: 1em;
	margin-right: 16px;
}

button {
	background-color: var(--light-bg-color);
	color: var(--fg-color);
	border: 1px solid var(--border-color);
	margin: 4px;
	cursor: pointer;
	display: flex;
	align-items: center;
	border-radius: 5px;
	font-size: 1.2rem;
}

#notification {
	position: absolute;
	bottom: 0;
	z-index: 10;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background-color: var(--error-bg-color);
	padding: 4px;
	transform: translateY(100%);
	transition: transform 0.3s;
}

#notification.show {
	transform: translateY(0);
}

#notification img {
	height: 1em;
	cursor: pointer;
}

#notification-text {
	white-space: pre-wrap;
}

.action {
	display: flex;
	flex-direction: row;
}

.action img {
	height: 1.5em;
	margin-right: 8px;
}