Make CSS modular

public/css/quiz.css

@@ -0,0 +1,86 @@
+.answerBox {
+	margin-bottom: var(--space-3xs);
+	& > label {
+		display: inline;
+	}
+}
+.answersBox > input {
+	display: block;
+}
+details:not(.toc) {
+	background-color: var(--card-color);
+	border: var(--border-details);
+	border-radius: var(--border-radius);
+	color: var(--text-color);
+	margin-top: var(--space-s);
+	padding: var(--space-xs);
+	width: 100%;
+	font-size: var(--step--2);
+	font-variation-settings: var(--font-variation-ui);
+	text-transform: uppercase;
+	letter-spacing: var(--ui-letter-spacing);
+	font-family: var(--font-family-ui);
+
+	::marker {
+		content: "+ ";
+	}
+	&[open] p {
+		font-size: var(--step--2);
+		line-height: calc(var(--step--2) * 0.25 + var(--step--2));
+	}
+	&[open] summary::marker {
+		content: "- ";
+	}
+	&[open] summary {
+		border-bottom: var(--border-details);
+		margin-bottom: var(--space-xs);
+		padding-bottom: var(--space-xs);
+	}
+	summary {
+		font-size: var(--step--2);
+		font-variation-settings: var(--font-variation-ui);
+		text-transform: uppercase;
+		letter-spacing: var(--ui-letter-spacing);
+		font-family: var(--font-family-ui);
+	}
+}
+dialog {
+	background-color: var(--card-color);
+	border: none;
+	border-radius: var(--border-radius);
+	box-shadow: var(--box-shadow);
+	width: var(--grid-max-width);
+	h2 {
+		padding-top: 0;
+	}
+	p {
+		color: var(--text-color);
+	}
+	&::backdrop {
+		background-color: var(--contrast-color);
+		opacity: 0.5;
+	}
+	img {
+		max-width: 100%;
+		padding-top: var(--space-s);
+	}
+}
+input.answer {
+	display: inline;
+}
+.questionBox {
+	margin: var(--space-s) 0;
+	figure {
+		padding-top: 0;
+		padding-bottom: 0;
+	}
+}
+.quizQuestion {
+	font-size: var(--step-2);
+	font-variation-settings:
+		"opsz" 50,
+		"wght" 350,
+		"SOFT" 20,
+		"WONK" 1;
+	line-height: calc(var(--step-2) * 0.25 + var(--step-2));
+}