:root {
	--bg-accent: #434343;
	--bg-color: #121212;
	--text-color: #dddddd;
}

html {
	background-color: var(--bg-color);
}

.rule-container {
	align-items: center;
	display: flex;
}

.instructions {
	padding: 0.5rem;
}

body {
	background-color: var(--bg-accent);
	border: 5px solid var(--bg-accent);
	border-radius: 5px;
	margin: 1rem auto 0 auto;
	width: max(50%, min(100%, calc(40vw + 270px)));
}

input[type=range]::-webkit-slider-runnable-track {
	background-color: var(--bg-accent);
	border: 1px solid var(--bg-accent);
	border-radius: 5px;
}

.rules-display > details > summary {
	cursor: pointer;
	font-size: 1.5rem;
	font-weight: bold;
}

.page-title {
	margin: 0.25rem auto;
	width: fit-content;
}

.rule-number {
	background: var(--bg-color);
	border: none;
	color: var(--text-color);
	display: inline-block;
	margin: 0.25rem;
	text-align: center;
	width: 3em;
}

.section {
	margin: 1rem;
}

details > *:not(summary) {
	background-color: var(--bg-color);
	border: 5px solid var(--bg-color);
}

details > * > h3 {
	margin-top: 0;
	padding-top: 0.25rem;
}

.command-copy {
	background-color: var(--bg-color);
	border: 5px solid var(--bg-color);
	border-radius: 5px;
	cursor: pointer;
	font-family: monospace;
	margin: 0.25rem;
	padding: 0.75rem;
}


		@keyframes copied {
			0% {
				border-color: rgb(70, 75, 70);
				background-color: rgb(50, 55, 50);
			}
			100% {}
		}
		
html, body {
	color: var(--text-color);
	font-family: sans-serif;
	font-size: 20px;
}

.rule-range {
	margin: 0.25rem;
}

.copied-anim {
	animation: 0.500000s ease-in-out 1 copied;
}