body {
	font-family: "Xanh Mono", monospace;
}

.main {
	max-width: 700px;
	color: white;
	width: fit-content;
	padding: 24px;
	margin: 20px auto;
	background: rgba(23, 11, 32, 0.9);
	backdrop-filter: blur(5px);
	border: 2px solid white;
}

h2 {
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 1px;
	color: rgb(187, 255, 174);
	margin-bottom: 6px;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	color: yellow;
	text-decoration: underline;
}

.quote {
	color: rgb(178, 220, 255);
	font-size: 14px;
	font-style: italic;
	margin-top: 0;
}

.dialogue {
	color: white;
	font-family: "Xanh Mono", monospace;
	width: fit-content;
	padding: 12px 24px;
	margin: 20px auto;
	background: rgba(0, 0, 0, 0.9);
	border: 2px solid white;
}

.option {
	color: white;
	text-decoration: none;
	display: flex;
	height: 25px;
	cursor: pointer;
}

.option::before {
	content: '';
	display: inline-block;
	width: 1em;
	margin-right: 6px;
}

.option:hover {
	color: yellow;
	text-decoration: none;
	cursor: pointer;
}

.option:hover::before {
	content: '▶';
	color: yellow;
}

/* Settings */
.settings {
	position: fixed;
	inset: auto 1rem 1rem auto;
	z-index: 9999;
	display: flex;
	gap: 12px;
}

.settings site-music::part(button),
.settings site-sfx::part(button) {
	font-family: "Xanh Mono", monospace;
	font-size: 12px;
	padding: .6rem .8rem;
	cursor: pointer;
	background: rgba(30, 30, 10, .85);
	border: 1px solid white;
	color: white;
	backdrop-filter: blur(5px);
}

.settings site-music::part(button):hover,
.settings site-sfx::part(button):hover {
	background: rgba(50, 50, 15, 0.85);
}