/******************************************************************/
/* NOTES */
/*******************************************************************/
/*
* Safari doesn't like text decoration shorthand *
* Safari doesn't like margin-block or padding-inline shorthand *
*/

/******************************************************************/
/* SETUP */
/*******************************************************************/
:root {
	/* Color Definitions */
	--coral: #ef5350;
	--dark-grey: #979797;
	--emerald-green: #008512;
	--grapefruit: #f15855;
	--greyish-brown: #4a4a4a;
	--greyish-brown-two: #535353;
	--light-grey: #d8d8d8;
	--light-greyish-blue: #e0e6ed;
	--lightish-grey-blue: #f9fafc;
	--mint-green: #91ffa0;
	--pale: #f3eee4;
	--very-dark-blue: #25262a;
	--very-dark-grey: #212121;
	--very-dark-greyish-blue: #333641;
	--very-dark-olive: #1d1e18;
	--very-light-grey: #fafafa;
	--white: #ffffff;

	/* Tokens */
	--background-color: var(--white);
	--background-color2: var(--very-light-grey);
	--code-bg: var(--lightish-grey-blue);
	--code-border: var(--light-greyish-blue);
	--dark-switch: var(--background-color);
	--dark-switch-border: var(--dark-grey);
	--default-color: var(--greyish-brown);
	--default-color-inverted: var(--white);
	--focus: var(--emerald-green);
	--footer-shadow: var(--very-light-grey);
	--header-bg: var(--background-color);
	--light-switch: var(--greyish-brown-two);
	--light-switch-border: transparent;
	--selection: rgba(0, 133, 18, 0.99);
	--scrollable-bg: var(--code-bg);
	--scrollable-shadow-0: rgba(224, 230, 237, 0);
	--scrollable-shadow-1: rgba(0, 0, 0, 0.2);
	--scrollable-shadow-2: rgba(0, 0, 0, 0);
	--sub-heading: var(--coral);

	--body-padding: 0.625rem;
	--max-width: 64rem;
}

@media (prefers-color-scheme: dark) {
	:root {
		--background-color: var(--very-dark-blue);
		--background-color2: var(--very-dark-grey);
		--code-bg: var(--very-dark-olive);
		--code-border: var(--very-dark-greyish-blue);
		--dark-switch: var(--greyish-brown-two);
		--dark-switch-border: transparent;
		--default-color: var(--white);
		--default-color-inverted: var(--greyish-brown);
		--focus: var(--mint-green);
		--footer-shadow: var(--greyish-brown);
		--light-switch: var(--bg-dark);
		--light-switch-border: var(--dark-grey);
		--selection: rgba(145, 255, 160, 0.99);
		--scrollable-shadow-0: rgba(0, 0, 0, 0);
		--scrollable-shadow-1: rgba(255, 255, 255, 0.2);
		--scrollable-shadow-2: rgba(255, 255, 255, 0);
		--sub-heading: var(--grapefruit);
	}
}

@font-face {
	font-family: AvenirNext;
	src: local(AvenirNext-Italic), url(./fonts/AvenirNext-Italic.woff2) format('woff2'),
		url(./fonts/AvenirNext-Italic.woff) format('woff'), url(./fonts/AvenirNext-Italic.ttf) format('truetype');
	font-display: swap;
	font-stretch: normal;
	font-style: italic;
	font-weight: normal;
}

@font-face {
	font-family: AvenirNext;
	src: local(AvenirNext-Regular), url(./fonts/AvenirNext-Regular.woff2) format('woff2'),
		url(./fonts/AvenirNext-Regular.woff) format('woff'), url(./fonts/AvenirNext-Regular.ttf) format('truetype');
	font-display: swap;
	font-stretch: normal;
	font-style: normal;
	font-weight: normal;
}

@font-face {
	font-family: AvenirNext;
	src: local(AvenirNext-Bold), url(./fonts/AvenirNext-Bold.woff2) format('woff2'),
		url(./fonts/AvenirNext-Bold.woff) format('woff'), url(./fonts/AvenirNext-Bold.ttf) format('truetype');
	font-display: swap;
	font-stretch: normal;
	font-style: normal;
	font-weight: bold;
}

@font-face {
	font-family: RobotoMono;
	src: local(RobotoMono-Regular), url(./fonts/RobotoMono-Regular.ttf) format('truetype');
	font-display: swap;
	font-stretch: normal;
	font-style: normal;
	font-weight: normal;
}

html {
	box-sizing: border-box;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

body {
	background-color: var(--background-color);
	color: var(--default-color);
	font-family: AvenirNext, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
		Cantarell, 'Helvetica Neue', Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	margin: auto;
	text-rendering: optimizeLegibility;
}

/******************************************************************/
/* TYPOGRAPHY */
/******************************************************************/

blockquote,
figure,
footer,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
img,
ol,
p,
ul {
	margin: 0;
	padding: 0;
}

h1,
h2,
h3,
h4,
h5 {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
}

h1 {
	font-size: 5em;
}

h1 svg {
	height: 7.313rem;
	width: 6.625rem;
	margin-block-end: 0.625rem;
	margin-inline-end: 2.125rem;
}

h1 svg path {
	fill: currentColor;
}

h2 {
	font-size: 2rem;
	margin-block-start: 3.75rem;
}

h2 svg {
	height: 2.75rem;
	width: 2.75rem;
	margin-block-end: 0.625rem;
	margin-inline-end: 1.25rem;
}

h3 {
	font-size: 1.25rem;
	margin-block-start: 1.313rem;
}

h4 {
	font-size: 1rem;
	margin-block-start: 1rem;
}

a {
	background-image: linear-gradient(currentColor, currentColor), currentColor;
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 100% 0;
	color: currentColor;
	outline: none;
	padding: 0.125em;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-color: currentColor;
	text-decoration-thickness: 0.063rem;
	text-underline-offset: 0.063rem;
}

a:hover,
a:focus,
summary:hover,
summary:focus {
	background-image: linear-gradient(var(--default-color), var(--default-color));
	background-size: 100% 100%;
	color: var(--background-color);
	outline: 0.125em solid transparent;
	text-decoration: none;
}

main p {
	font-size: 1.125rem;
	margin-block-start: 1.25rem;
	max-width: 50rem;
}

main p + p {
	margin-block-start: calc(1em * 1.5);
}

main ul,
main ol {
	font-size: 1.125rem;
	line-height: 1.88;
	margin-block-start: 1.25rem;
	margin-inline-start: 1rem;
}

nav a,
h2 a,
h3 a,
summary {
	background-image: linear-gradient(var(--focus), var(--focus)), var(--focus);
	text-decoration-color: var(--focus);
	text-decoration-thickness: 0.25rem;
	text-underline-offset: 0.375rem;
}

nav a:hover,
nav a:focus,
h2 a:hover,
h2 a:focus,
h3 a:hover,
h3 a:focus,
summary:hover,
summary:focus {
	background-image: linear-gradient(var(--focus), var(--focus));
	color: var(--default-color-inverted);
}

img {
	vertical-align: middle;
}

img,
video {
	height: auto;
	max-width: 100%;
}

code,
script,
kbd {
	font-family: RobotoMono, monospace;
	font-size: 1rem;
	line-height: 1.875rem;
}

kbd {
	background-color: var(--code-bg);
	border: 0.063rem solid var(--code-border);
	border-radius: 3px;
	box-shadow: 0 0.063rem 0.063rem currentColor, 0 0.125rem 0 0 var(--code-bg) inset;
	display: inline-block;
	line-height: 1;
	padding: 0.25rem;
	white-space: nowrap;
}

details {
	margin-block-end: 3.625rem;
}

summary {
	background-image: linear-gradient(var(--focus), var(--focus)), var(--focus);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 100% 0;
	color: currentColor;
	cursor: pointer;
	list-style-type: none;
	padding-inline-start: 3rem;
	position: relative;
}

summary::marker {
	display: none;
}

summary::-webkit-details-marker {
	display: none;
}

summary::before {
	border-style: solid;
	border-width: 0.25rem 0.25rem 0 0;
	border-color: currentColor;
	content: '';
	display: inline-block;
	height: 1rem;
	left: 0.75rem;
	pointer-events: none;
	position: absolute;
	top: 0;
	transform: rotate(135deg);
	width: 1rem;
}

details[open] summary::before {
	top: 0.625rem;
	transform: rotate(-45deg);
}

summary h2 {
	font-size: 1.25rem;
	margin: 0;
}

dt {
	font-weight: bold;
}

* {
	scrollbar-width: thin;
	scrollbar-color: var(--background-color2) currentColor;
}

*::-webkit-scrollbar {
	height: 1rem;
	width: 1rem;
}

*::-webkit-scrollbar-track {
	background: currentColor;
}

*::-webkit-scrollbar-thumb {
	background-color: var(--background-color2);
	border-radius: 1rem;
	border: 0.125rem solid currentColor;
}

::selection {
	color: var(--default-color-inverted);
	background-color: var(--selection);
}

/******************************************************************/
/* LANDMARKS*/
/******************************************************************/

/* Header */

.header-wrapper {
	background-color: var(--header-bg);
}

header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-block-start: 1.875rem;
	padding-block-end: 0.563rem;
}

header button {
	background-color: inherit;
	border-radius: 0.625rem;
	color: var(--default-dark);
	cursor: pointer;
	font: bold 1rem AvenirNext;
	height: 2.75rem;
	text-transform: capitalize;
	width: 5.688rem;
}

header button:first-of-type {
	background-color: var(--light-switch);
	border: solid 1px var(--light-switch-border);
}

header button:last-of-type {
	background-color: var(--dark-switch);
	border: solid 1px var(--dark-switch-border);
	color: currentColor;
}

header p {
	max-width: 20rem;
}

header nav {
	margin-inline-start: auto;
}

/* Main */

.main-wrapper {
	background-color: var(--background-color);
	padding-block-end: 6.75rem;
}

main {
	outline: 0;
}

/* Footer */

main + footer {
	box-shadow: inset 0 1px 0 0 var(--footer-shadow);
	padding: 2.375rem 0;
}

.footer-wrapper {
	background-color: var(--background-color2);
}

.footer-content {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

footer nav ul {
	display: flex;
	flex-wrap: wrap;
}

footer p {
	margin-block-start: 3.5rem;
	text-align: center;
}

/******************************************************************/
/* COMPONENTS */
/******************************************************************/

.skip-link {
	position: absolute;
	top: -100%;
}

.skip-link:focus {
	top: 0;
}

.logo {
	align-self: flex-start;
	color: currentColor;
	display: inline-flex;
	font-size: 2.5rem;
	font-weight: bold;
	line-height: 1;
	margin-block-end: 1rem;
	margin-inline-end: 1rem;
	padding: 0;
	text-decoration: none;
}

#theme {
	background-color: currentColor;
	border-radius: 2rem;
	cursor: pointer;
	display: inline-block;
	height: 2.75rem;
	margin-right: 12rem;
	position: relative;
	width: 5rem;
}

#theme > input {
	pointer-events: none;
}

.theme-label {
	font-weight: bold;
	left: calc(100% + 0.875rem);
	line-height: 2.75rem;
	position: absolute;
	white-space: nowrap;
}

.theme-label::before {
	background-color: var(--background-color);
	content: '';
	display: block;
	height: 2.188rem;
	width: 2.188rem;
	position: absolute;
	right: calc(100% + 3.313rem);
	top: 4px;
	border-radius: 2rem;
}

.theme-label span {
	display: none;
}

#theme input:checked + .theme-label::before {
	right: calc(100% + 1.188rem);
}

#theme input:not(:checked) + .theme-label > span:last-of-type,
#theme input:checked + .theme-label > span:first-of-type {
	display: inline-block;
}

/* Nav */

nav li {
	padding-block-start: 0.938rem;
	padding-block-end: 0.75rem;
	padding-inline-end: 1.25rem;
}

nav a {
	background-size: 100% 0;
	font-weight: bold;
	text-decoration: none;
}

nav [aria-current='page'] {
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-color: var(--focus);
	text-decoration-thickness: 0.25rem;
	text-underline-offset: 0.375rem;
}

/* Article */

.article_container {
	display: flex;
	flex-direction: column;
	margin-block-start: 0.75rem;
}

.article_container p {
	margin-block-start: 0.5rem;
	order: 3;
}

.article_container footer {
	font-style: italic;
	margin-block-start: 0.5rem;
	order: 2;
}

li .article_container {
	display: inline-flex;
}

.entry-meta {
	align-items: center;
	display: flex;
	flex-direction: column;
	margin-block-end: 2.5rem;
}

.entry-meta p {
	color: var(--sub-heading);
	font-size: 1.25rem;
	font-weight: bold;
	margin-block-end: 1.75rem;
	margin-block-start: unset;
	text-align: center;
}

.entry-meta h1 {
	font-size: 2rem;
}

.entry-meta time {
	margin-block-start: 1.25rem;
}

/* Figure */

figure {
	align-items: center;
	display: flex;
	flex-direction: column;
	margin-block-end: 2.5rem;
	margin-block-start: 2.5rem;
}

.image-container {
	border-radius: 1rem;
	overflow: hidden;
}

.quote-container {
	border-image-source: linear-gradient(
		90deg,
		transparent 0%,
		transparent 45%,
		var(--code-border) 45%,
		var(--code-border) 55%,
		transparent 55%,
		transparent 100%
	);
	border-image-slice: 1;
	border-style: solid;
	border-width: 0.25rem 0;
	padding-block-end: 1.25rem;
	padding-block-start: 1.25rem;
}

blockquote {
	font-weight: bold;
	max-width: 80%;
	word-break: break-word;
}

blockquote > p {
	margin-block-start: unset;
}

figcaption {
	margin-block-start: 1.25rem;
}

figure > script {
	background-color: var(--code-bg);
	border: solid 1px var(--code-border);
	border-radius: 1rem;
	display: block;
	white-space: pre;
	width: 100%;
}

figure.embed {
	width: 100%;
	aspect-ratio: 16 / 9;
}

figure.embed iframe {
	width: 100%;
	height: 100%;
}

hr {
	border-image-source: linear-gradient(
		90deg,
		transparent 0%,
		transparent 30%,
		var(--code-border) 30%,
		var(--code-border) 70%,
		transparent 70%,
		transparent 100%
	);
	border-image-slice: 1;
	border-style: solid;
	border-width: 0.25rem 0 0;
	margin-block-end: 3rem;
	margin-block-start: 3rem;
}

.back {
	font-weight: bold;
	margin-block-start: 6rem;
	text-align: center;
}

/******************************************************************/
/* UTILITIES */
/******************************************************************/

.u-center-content {
	margin: auto;
	max-width: var(--max-width);
	padding-inline-start: var(--body-padding);
	padding-inline-end: var(--body-padding);
}

.u-flex {
	display: flex;
}

.u-font-1\.25 {
	font-size: 1.25em;
}

[tabindex='0']:hover,
[tabindex='0']:focus,
.u-focus:hover,
.u-focus:focus {
	box-shadow: 0 0 0 1px var(--background-color), 0 0 0 3px var(--focus);
	outline: 2px solid transparent;
}

.u-remove-marker,
.u-remove-marker li {
	list-style-type: none;
	margin: 0;
}

.u-reset-margin {
	margin: 0;
}

.u-scrollable {
	background: linear-gradient(to right, var(--scrollable-bg) 30%, var(--scrollable-shadow-0)),
		linear-gradient(to right, var(--scrollable-shadow-0), var(--scrollable-bg) 70%) 0 100%,
		radial-gradient(farthest-side at 0% 50%, var(--scrollable-shadow-1), var(--scrollable-shadow-2)),
		radial-gradient(farthest-side at 100% 50%, var(--scrollable-shadow-1), var(--scrollable-shadow-2)) 0 100%;
	background-repeat: no-repeat;
	background-color: var(--scrollable-bg);
	background-size: 3rem 100%, 3rem 100%, 1.75rem 100%, 1.75rem 100%;
	background-position: 0 0, 100%, 0 0, 100%;
	background-attachment: local, local, scroll, scroll;
	max-width: 100%;
	overflow: auto;
	overscroll-behavior: contain auto;
}

.u-scrollable[tabindex]:hover,
.u-scrollable[tabindex]:focus {
	box-shadow: 0px 0px 0px 3px var(--focus);
}

.u-visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/******************************************************************/
/* Media Queries */
/******************************************************************/

@media (min-width: 35.313em) {
	/* 430px */
	header nav ul {
		display: flex;
	}
}

@media (min-width: 31.25em) {
	/* 500px */
	:root {
		--body-padding: 2.625rem;
	}
	header {
		padding-block-start: 4rem;
		padding-block-end: 1.25rem;
	}
}

@media (min-width: 43.125em) {
	/* 690px */
	header nav ul {
		display: block;
	}

	header nav ul li:first-of-type {
		padding-block-start: 0;
	}
}

/* Enable animations */
@media (prefers-reduced-motion: no-preference) {
	a,
	summary {
		transition: background-size cubic-bezier(0, 0.5, 0, 1) 0.3s;
	}

	html {
		scroll-behavior: smooth;
	}

	.theme-label::before {
		transition: right 0.25s ease;
	}
}

/* Windows High Contrast Mode */
@media (forced-colors: active) {
	:root {
		--code-border: currentColor;
	}
}