@import url('https://fonts.googleapis.com/css2?family=Baskervville:ital,wght@1,500&family=La+Belle+Aurore&family=Red+Hat+Display:wght@700&family=Red+Hat+Mono&family=Red+Hat+Text:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20,400,0,0&icon_names=alternate_email,signature,thread_unread');

:root {
	/* typography */
	--sans-text: 'Red Hat Text', san-serif;
	--sans-display: 'Red Hat Display', sans-serif;
	--serif: 'Baskervville', serif;
	--mono: 'Red Hat Mono', monospace;
	--cursive: 'La Belle Aurore', cursive;


	/* font size tokens */
	--fs-xs: .75rem;
	--fs-sm: .875rem;
	--fs-md: 1rem;
	--fs-lg: 1.125rem;
	--fs-xl: 1.5rem;

	--fs-base: 16px;

	/* line height tokens */
	--lh-sm: 1.2;
	--lh-md: 1.4;
	--lh-lg: 1.6;

	/* body font weight tokens */
	--fw-rg: 400;
	--fw-md: 500;

	/* Light Mode Colors (Default) */
	--bg: #EBDED3;
	--heading-1: #CC2A1F;
	--heading-3: #871108;
	--text-primary: rgba(51, 28, 8, 1);
	--text-secondary: rgba(051, 28, 8, 0.6);
	--text-tertiary: rgba(51, 28, 8, 0.3);
	--border: rgba(51, 28, 8, 0.15);
	--selection: rgba(51, 28, 8, 0.08);
	--code-bg: rgba(51, 28, 8, 0.04);
	--mark: #FED049;

	/* space */
	--space-base: 8px;

	/* body */
	--body-fs: 1.125rem;
	--body-lh: 1.3;
	--text-color: var(--color-midnight);
}

/* Global Stuff */

* {
	margin: 0;
	padding: 0;
	scroll-margin-top: 7em;
}

html {
	background-color: var(--bg);
	scrollbar-gutter: stable;
	scroll-behavior: smooth;
}

body {
	font-family: var(--sans-text);
	font-size: var(--fs-md);
	line-height: var(--lh-lg);
	color: var(--text-primary);
	min-height: 100dvh;
	padding: 24px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: auto 1fr auto;
	gap: 48px;
	box-sizing: border-box;
}

nav {
		grid-row: 1;
}

/* body */

main {
	grid-column: 1 / span 4;
	grid-row: 2;
	display: flex;
	flex-flow: column nowrap;
}

section {
	padding-bottom: calc(var(--space-base) * 3);
}

/* bold text */
b {
  font-weight: var(--fw-md);
}

/* emphasized text */
em {
  font-family: var(--serif);
  font-style: italic;
}

a {
	color: var(--text-primary);
	text-decoration: underline;
	text-decoration-style: wavy;
	text-decoration-color: var(--text-tertiary);
	text-decoration-thickness: 1.5px;
	text-underline-offset: .25rem;
	transition: text-decoration-color 0.15s ease;
}

a:hover {
	text-decoration-color: var(--text-secondary);
}

del {
	text-decoration: line-through;
	text-decoration-style: wavy;
	text-decoration-color: var(--heading-3);
	text-decoration-thickness: 1.5px;
}

code {
	padding: 2.5px 3.5px;
  border-radius: 4px;
  background-color: var(--code-bg);
  border: 0.5px solid var(--border);
  font-family: var(--mono);
  font-weight: var(--fw-md);
  font-size: var(--fs-sm);
}

.date {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: var(--fw-rg);
  color: var(--text-secondary);
  white-space: nowrap;
}

/* footer */

footer {
	grid-column: 1 / -1;
	grid-row: 3;
	align-self: self-end;

	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}

footer p, footer a {
	color: var(--text-tertiary);
	text-decoration: none;
	transition: color .15s ease;
}

footer p {
	font-family: var(--serif);
	font-style: italic;
	font-size: var(--fs-xs);
	font-weight: var(--fw-rg);
	align-self: self-end;
}

footer a:hover {
	color: var(--text-secondary);
}

footer div {
	height: 24px;
	padding: 4px;
}

@media only screen and (min-width: 640px) {
	body {
		padding: 48px;
	}
}

@media only screen and (min-width: 768px) {
	body {
		grid-template-rows: 1fr auto;
	}

	main {
		grid-column: 1 / span 3;
		grid-row: 1;
	}

	nav {
		grid-column: 4;
	}

	footer {
		grid-row: 2;
	}
}

@media only screen and (min-width: 1024px) {
	body {
		grid-template-columns: repeat(5, 1fr);
	}

	main {
		grid-column: 1 / span 3;
	}

	nav {
		grid-column: 5 / span 1;
	}
}

@media only screen and (min-width: 1440px) {
	main {
		grid-column: 2 / span 2;
	}

	footer {
		grid-column: 2 / -1;
	}
}