source ⟩ hypertext ⟩ public ⟩ uses ⟩ uses.css

:root {
	/* Black text on a white background is far more austere than i’d normally tolerate, but it’s a boring page for boring people, so i thought it’d fit. */
	--background: #f8f8f8;
	--text: #444;
	--accent: #7a0079;
	--accent-dark: #490049;

	font-size: 1.35rem;
}

body {
	background-color: var(--accent);
	background-image: url("/uses/purplebg.png");
	background-size: auto;

	font-family: "Junicode", var(--serif);
	font-stretch: 90%;
}

div.section,
footer.page-footer,
div.comment-section {
	inline-size: 90%;
	padding-block-end: 1.5em;
	padding-inline: 1em;
	border: 3px solid var(--accent-dark);

	background-color: var(--background);
	box-shadow: 6px 6px var(--accent-dark);
	

	&:nth-child(even) {
		margin-inline-start: calc(10% - 6px);
	}

	&:not(:last-child) {
		margin-block-end: -2em;
	}
}

footer.page-footer {
	padding-block: 1em 2.5em;
}

h1,
h2 {
	color: var(--accent-dark);
	font-family: var(--sans-serif);
	font-style: italic;
}

h2 {
	margin-block-start: 2rem;

	& code:not(pre code) {
		font-size: 1em;
	}
}

img:not(.comment-section img) {
	max-inline-size: 80%;
	margin-block: 1.75rem;

	box-shadow: 0 0 1em #0002, 0 0.5ch 0.5em #0004;
}

a {
	&:hover,
	&:focus {
		text-decoration: none;
	}
}

@font-face {
	font-family: "Junicode";
	src: url("/fonts/JunicodeVF-Roman.woff2");
	font-weight: 300 700;
	font-stretch: 75% 125%;
	font-style: normal;
}

@font-face {
	font-family: "Junicode";
	src: url("/fonts/JunicodeVF-Italic.woff2");
	font-weight: 300 700;
	font-stretch: 75% 125%;
	font-style: italic;
}