/* This is from Google Fonts `<> Get embed code` → `@import` option. */
/* We don’t need the `<style>` tag they give you, since we are already in CSS! */
@import url('https://fonts.googleapis.com/css2?family=National+Park:wght@200..800&display=swap');

/* These font files are in my repo (as the license allows). */
@font-face {
	font-family: 'EB Garamond'; /* For quote use below! */
	font-style: normal;
	src: url('eb-garamond-regular.woff2') format('woff2');
}

/* Note the family is the same but the style/file are different. */
@font-face {
	font-family: 'EB Garamond';
	font-style: italic;
	src: url('eb-garamond-italic.woff2') format('woff2');
}

/* Our base styles. */
/* This could also be `html { … }` */
:root {
	/* Our base color/font properties will inherit to everything. */
	font-family: 'National Park', sans-serif;
	font-size: 150%;
	padding: 3rem;
	font-weight: 200; /* This font has 100–900 weights; some only have normal/bold. */
}

/* Some default spacing between things! */
*:where(:not(:first-child)) { margin-block-start: 1rem; }

/* Bigger headings. */
h1 { font-size: 5rem; }
h2 { font-size: 3rem; }

/* All my headings… */
h1, h2, h3 {
	color: red;
	line-height: 0.9; /* Tighten the leading on our big type. */
	text-transform: uppercase;
}

h3 {
	color: darkgray;
	font-size: 2rem;
	margin-block-start: 3em; /* More space above these; `em` is relative to its size. */
}

header {
	font-weight: 400; /* Inherits to verything in these containers. */

	/* Add an icon on “nested” links inside of these. */
	a::after { content: ' →'; }
}


/* Push the paragraph/nav after the heading down. */
h1 + p, nav { margin-block-start: 3rem }

/* Space above these. */
article, section { margin-block-start: 5rem }

/* The reset clears this default, so we add it back. */
em { font-style: italic; }

/* Same for link underlining (here, just within `section`). */
section a {
	text-decoration: underline;
	text-decoration-color: red;
}

pre {
	font-family: 'Courier', monospace; /* Typewriter vibes. */
	font-size: 1.5rem;
	margin-block: 2em; /* More space above/below, `em` relative to size. */
	opacity: 40%; /* Fade these back. */
}

p {
	line-height: 180%; /* Body copy needs looser vertical spacing. */
	max-width: 60ch; /* Limit the line-lengths (approximate characters). */
}

/* Only the ordered lists in the article… */
article ol { margin-block: 2em; }

/* Only the list items within those… */
article ol li {
	/* The reset also cleared list bullets, so add them back. */
	list-style-type: square;
	margin-inline-start: 2rem; /* This is “on the left. */
}

/* You could also write this “nested”:

article ol {
	margin-block: 2em;

	li {
		list-style-type: square;
		margin-inline-start: 2rem;
	}
}

*/

/* Make these appear inline (side-by-side): */
nav li {
	display: inline;
	margin-inline-end: 1em;

	a::after { content: ' ↓'; } /* Add an icon after links again. */
}

/* We’ll have these inset and a bit bigger. */
blockquote {
	font-family: 'EB Garamond', serif;
	font-size: 1.5rem;
	font-style: italic;
	margin-block: 3em;
	margin-inline-start: 6em; /* Left. */
}

details { margin-block-start: 5em }

/* Switch the open/close icon! */
details summary::after { content: ' +'}
details[open] summary::after { content: ' –'}

summary {
	font-weight: 500;
	cursor: pointer; /* Reset cleared the “Mickey-Mouse” hand. */
}

footer {
	background-color: red;
	color: white;
	padding: 2rem;

	/* “Nested” links in the footer. */
	a {
		display: inline-block;
		font-weight: 500;
		margin-block-start: 2rem;
		text-decoration: none;
		text-transform: uppercase;

		/* Add an arrow after. */
		&::after { content: ' ↑'}
	}
}

/* Use classes for things you want to treat alike, across your elements. */
.inset {
	background-color: #eee;
	padding: 2rem;
}