source ⟩ hypertext ⟩ public ⟩ shrines ⟩ forest.css

:root {
	--background: #e8e8e8;
	--text: #111e;
	--accent: #111e;

	font-size: 1.4rem;
}

main {
	max-inline-size: 75ch;
}

body {
	font-family: var(--cormorant);
}

body:lang(grc) {
	font-family: "Junicode", serif;
}

h1 {
	margin-block-end: 0.2rem;
}

nav.languages {
	margin-block-end: 2rem;
}

header img {
	inline-size: 100%;
}

details {
	margin: 1rem;

	border: none;
}

summary {
	padding: 0;

	color: var(--text);
	font-size: 1.5rem;
	text-align: start;

	border: none;
}

#leave {
	margin: 1rem;

	font-size: 1.5rem;
	text-decoration: none;
}

#leave:hover {
	text-decoration: underline;
}

/* Firefox */
summary {
	list-style: none;
}

/* Chrome, Safari */
summary::-webkit-details-marker {
	display: none;
}

summary:before {
	content: "❧";

	display: inline-block;
	margin-inline-end: 0.2em;
	color: var(--accent);
	font-weight: normal;

	transition: transform 0.2s;
}

details[open]>summary:before {
	transform: translate(0.333em, 0) rotate(90deg);
}

details p {
	margin-block-start: 0;
	margin-inline-end: 0.5rem;
	padding: 0;
}

div.details-inner {
	display: grid;
	grid-template-columns: 1fr 8rem;
}

@media only screen and (max-width: 649px) {
	div.details-inner {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
	}
}

img.scenery {
	inline-size: 100%;
	max-inline-size: 8rem;
	margin-block-start: 0.5rem;
}

.biglink {
	font-size: 1.25rem;
	font-weight: bold;
	letter-spacing: -0.02em;
	text-decoration: none;
}

.biglink:hover {
	text-decoration: underline;
}

blockquote i {
	font-style: normal;
}

/* Custom stuff */

.under-construction strong {
	font-style: normal;
}

.meadow {
	--accent: #b56100;
}

.woodland {
	--accent: #613;
}

.cave {
	--accent: #164;
}

.pond {
	--accent: #659;
}

.path {
	--accent: #521;
}

@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: 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;
}

@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;
}