* {
	box-sizing: border-box;
}

body {
	font: 16px sans-serif;
	margin: 0 auto;
	max-width: 800px;
	padding: 16px;
	scroll-behavior: smooth;
	width: 100%;
}

p {
	text-align: justify;
}

small {
	font-size: smaller;
}

.emoji {
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Android Emoji", "EmojiSymbols", "EmojiOne Mozilla", "Twemoji Mozilla", "Segoe UI Symbol", sans-serif;
	font-weight: 400;
}

.tombol-ke-atas {
	float: right;
	margin-left: 8px;
}

.label-potongan {
	border-radius: 16px;
	border: 1px solid #ddd;
	cursor: pointer;
	display: block;
	margin: 8px 0;
	padding: 16px 0;
	width: 100%;
}

.label-potongan:hover,
.label-potongan.label-sorot {
	background-color: #ddf;
	border-color: #aad;
}

.label-potongan>small {
	border-left: 1px solid #ddd;
	float: right;
	margin-left: 8px;
	padding: 0 16px 0 8px;
}

.label-potongan:hover>small,
.label-potongan.label-sorot>small {
	border-color: #aad;
}

.opsi-potongan {
	margin: 0 8px 0 16px;
}

#paragraf-at-taubah {
	background-color: #ffe;
	border-color: #ddb;
	font-size: 80%;
	padding: 16px;
}

#paragraf-at-taubah>span.emoji {
	margin: 0 8px 0 0;
}

footer {
	border-top: 1px solid #222;
	color: #222;
	font-size: 75%;
	margin-top: 48px;
	padding: 8px 0;
	text-align: center;
}

@media (prefers-color-scheme: dark) {
	html {
		background: #000;
		color: #fff;
	}

	.label-potongan,
	.label-potongan>small {
		border-color: #222;
	}

	.label-potongan:hover,
	.label-potongan.label-sorot {
		background-color: #224;
		border-color: #447;
	}

	.label-potongan:hover>small,
	.label-potongan.label-sorot>small {
		border-color: #447;
	}

	#paragraf-at-taubah {
		background-color: #220;
		border-color: #662;
	}

	footer {
		border-color: #ddd;
		color: #ddd;
	}
}