:root {
	--bg-color: #ffffff;
	--button-color: #6088bb;
	--pressed-button-color: color-mix(in srgb, var(--button-color) 50%, transparent);
	--text-color: #000b19;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg-color: #1d242f;
		--button-color: #4e6e97;
		--pressed-button-color: color-mix(in srgb, var(--button-color) 50%, transparent);
		--text-color: #f5f5f5;
		--url-color: color-mix(in srgb, var(--text-color) 75%, #0000f0 10%);
	}
}

/* EDIT: bodyスタイルの更新 */
body {
	background-color: var(--bg-color);
	color: var(--text-color);
	margin: 0;
	font-family: sans-serif;
	user-select: none;
}

button {
	background-color: var(--button-color);
	color: var(--text-color);
	border-radius: 5px;
	padding: 10px;
	cursor: pointer;
	border: none;
}

button:active {
	background-color: var(--pressed-button-color);
}

a {
	color: var(--url-color);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.section-1 {
	background-color: color-mix(in srgb, var(--button-color) 20%, transparent);
}