source ⟩ hypertext ⟩ public ⟩ shrines ⟩ communal.css

:root {
	--shadow-preset: 0 5px 10px 0 black;
}

body {
	font-family: var(--cormorant);
	font-weight: 300;

	background-repeat: repeating;
	background-size: auto;
}

.dark::after {
	content: "";

	position: fixed;
	inset-block-start: 0;
	inset-inline-start: 0;

	block-size: 100%;
	inline-size: 100%;

	background-color: #000C;
}

.framed {
	max-block-size: 75vh;
	max-inline-size: 80%;
	margin: 1em auto;
	padding: 0;

	border: 20px solid transparent;
	border-image: url("/cosmetics/goldtrim.gif") 20 round;
	box-shadow: var(--shadow-preset);
}

.dark .idol {
	position: relative;
	z-index: 100;
}

h1 {
	font-style: italic;
	font-weight: 600;
}

main {
	max-inline-size: 90ch;
	padding: 2em;

	background-color: var(--background);
	box-shadow: var(--shadow-preset);
}

b, strong {
	font-weight: 600;
}

p.centre {
	margin: 1em auto;

	text-align: center;
}

.epithets {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

	margin: 0;
	padding: 0;

	color: var(--accent);
}

.epithets:not(.epithets + .epithets) {
	font-weight: bold;
	letter-spacing: var(--caps-spacing);
	text-transform: uppercase;
}

.epithets+.epithets {
	font-style: italic;
}

.epithets li {
	display: block;
}

.epithets li+li::before {
	content: "· "
}

.splash {
	color: var(--accent);
	font-size: 1.75em;
	font-style: italic;
	font-weight: bold;
	text-align: center;
	text-shadow: 0 2px 5px #0008;
}

ul.splash {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

	margin: 0;
	padding: 0;

	text-align: center;
}

ul.splash li {
	display: block;
}

ul.splash li+li::before {
	content: "· "
}

.splash>a {
	white-space: nowrap;
}

#hymn {
	margin: 1ch;

	text-align: center;
}

hr {
	background-size: contain;
	background-repeat: no-repeat;
	border: none;
}

#toggle-lights {
	float: right;
	margin: 0;
	padding: 0;

	font-size: 2rem;

	border: none;
}

#toggle-lights:focus, #toggle-lights:hover {
	background-color: transparent;

	scale: 1.5;
}

.dark #toggle-lights {
	position: relative;
	z-index: 100;
}

.theonym {
	font-weight: bold;
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 300;
	src: local("Cormorant Garamond Light"), local("CormorantGaramond-Light"),
		url("/fonts/cormorant-light.woff2") format("woff2");
	font-display: fallback;
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 400;
	src: local("Cormorant Garamond Regular"), local("CormorantGaramond-Regular"),
		url("/fonts/cormorant-regular.woff2") format("woff2");
	font-display: fallback;
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: italic;
	font-weight: 300;
	src: local("Cormorant Garamond Light Italic"),
		local("CormorantGaramond-LightItalic"),
		url("/fonts/cormorant-light-italic.woff2") format("woff2");
	font-display: fallback;
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: italic;
	font-weight: 400;
	src: local("Cormorant Garamond Italic"), local("CormorantGaramond-Italic"),
		url("/fonts/cormorant-italic.woff2") format("woff2");
	font-display: fallback;
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 600;
	src: local("Cormorant Garamond SemiBold"),
		local("CormorantGaramond-SemiBold"),
		url("/fonts/cormorant-bold.woff2") format("woff2");
	font-display: fallback;
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: italic;
	font-weight: 600;
	src: local("Cormorant Garamond SemiBold Italic"),
		local("CormorantGaramond-SemiBoldItalic"),
		url("/fonts/cormorant-bold-italic.woff2") format("woff2");
	font-display: fallback;
}