:root {
	/* Styles taken from https://tailwindcss.com/ */
	--box-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
		0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--box-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
		0 4px 6px -2px rgba(0, 0, 0, 0.05);

	--pink-100: #fff5f7;
	--pink-200: #fed7e2;
	--pink-300: #fbb6ce;
	--pink-400: #f687b3;
	--pink-500: #ed64a6;
	--pink-600: #d53f8c;
	--pink-700: #b83280;
	--gray-100: #f7fafc;
	--gray-200: #edf2f7;
	--gray-300: #e2e8f0;
	--gray-400: #cbd5e0;
	--gray-500: #a0aec0;
	--gray-600: #718096;
	--gray-700: #4a5568;
	--gray-800: #2d3748;
	--gray-900: #1a202c;
	--black: #000;
	--red-100: #fff5f5;
	--red-200: #fed7d7;
	--red-300: #feb2b2;
	--red-400: #fc8181;
	--red-500: #f56565;
	--red-600: #e53e3e;
	--red-700: #c53030;
	--orange-100: #fffaf0;
	--orange-200: #feebc8;
	--orange-300: #fbd38d;
	--orange-400: #f6ad55;
	--orange-500: #ed8936;
	--orange-600: #dd6b20;
	--orange-700: #c05621;
	--orange-800: #9c4221;
	--orange-900: #7b341e;
	--green-100: #f0fff4;
	--green-200: #c6f6d5;
	--green-300: #9ae6b4;
	--green-400: #68d391;
	--green-500: #48bb78;
	--green-600: #38a169;
	--green-700: #2f855a;
	--teal-100: #e6fffa;
	--teal-200: #b2f5ea;
	--teal-300: #81e6d9;
	--teal-400: #4fd1c5;
	--teal-500: #38b2ac;
	--teal-600: #319795;
	--teal-700: #2c7a7b;
	--blue-100: #ebf8ff;
	--blue-200: #bee3f8;
	--blue-300: #90cdf4;
	--blue-400: #63b3ed;
	--blue-500: #4299e1;
	--blue-600: #3182ce;
	--blue-700: #2b6cb0;
	--blue-800: #2c5282;
	--blue-900: #2a4365;
	--indigo-100: #ebf4ff;
	--indigo-200: #c3dafe;
	--indigo-300: #a3bffa;
	--indigo-400: #7f9cf5;
	--indigo-500: #667eea;
	--indigo-600: #5a67d8;
	--indigo-700: #4c51bf;
	--indigo-800: #434190;
	--indigo-900: #3c366b;
	--purple-100: #faf5ff;
	--purple-200: #e9d8fd;
	--purple-300: #d6bcfa;
	--purple-400: #b794f4;
	--purple-500: #9f7aea;
	--purple-600: #805ad5;
	--purple-700: #6b46c1;

	--spacer-xxxs: 0.125rem;
	--spacer-xxs: 0.25rem;
	--spacer-xs: 0.5rem;
	--spacer-sm: 0.75rem;
	--spacer-base: 1.25rem;
	--spacer-md: 2rem;
	--spacer-lg: 3.25rem;
	--spacer-xl: 5.25rem;

	--default-container-width: 50rem;
	--container-width: var(--default-container-width);

	--body-padding-x: var(--spacer-base);

	--font-family-sans-bold: FFMarkWebProBold, "Helvetica Neue", Helvetica,
		Arial, sans-serif;
	--font-family-sans: FFMarkWebProBook, "Helvetica Neue", Helvetica, Arial,
		sans-serif;
	--font-family-serif: FreightTextPro, Georgia, Times, "Times New Roman",
		serif;
	--font-family-mono: HackRegular, "Monaco", "Courier New", monospace;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-family-sans-bold);
}
body {
	font-family: var(--font-family-serif);
	color: var(--gray-900);
	line-height: 1.6;
	margin: 0;
	font-size: 1.125rem;
}
body > header {
	padding: var(--spacer-base) var(--body-padding-x) 0;
	background-image: radial-gradient(
			circle at 50% -20%,
			var(--pink-100) 37%,
			#fff5f700 37.5%
		),
		radial-gradient(circle at 30% 40%, var(--purple-100) 7%, #ebf4ff00 7.5%),
		radial-gradient(
			circle at 75% 50%,
			var(--purple-100) 10%,
			#ebf4ff00 10.5%
		);
	background-repeat: no-repeat;
	font-family: var(--font-family-sans);
}
main > section {
	padding: var(--spacer-lg) var(--body-padding-x) var(--spacer-xl);
	margin: 0;
}
main > section:first-of-type {
	padding-top: 0;
}
header,
main > section > * {
	max-width: var(--container-width);
	margin-left: auto;
	margin-right: auto;
}
* {
	margin-bottom: 0;
}
*,
*::before,
*::after {
	box-sizing: border-box;
}
* + * {
	margin-top: var(--spacer-sm);
}
h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: 1.15;
}
h2,
h3,
h4 {
	display: flex;
}
h2 a,
h3 a,
h4 a {
	margin-left: var(--spacer-xxs);
}
h2 a::before,
h3 a::before,
h4 a::before {
	display: block;
	content: "#";
}
h2 {
	margin-top: var(--spacer-base);
}
h3,
h4,
h5 {
	margin-top: var(--spacer-md);
}
h5 + *,
h6 + * {
	margin-top: var(--spacer-sm);
}
ol,
ul {
	margin-top: var(--spacer-base);
	padding-left: var(--spacer-base);
}

pre,
p code {
	font-family: var(--font-family-mono);
}
p code {
	display: inline-block;
	background-color: var(--gray-100);
	padding: 0 var(--spacer-xxs);
	margin-top: var(--spacer-xxxs);
}

pre {
	overflow: auto;
	padding: var(--spacer-sm) var(--body-padding-x);
	background-color: var(--gray-100);
	line-height: 1.25;
	box-shadow: var(--box-shadow-lg);
}

*:focus {
	padding: var(--spacer-xxs);
	outline: 2px dashed var(--blue-500);
}

.visually-hidden {
	max-height: 0;
	font-size: 0;
	margin: 0;
}

a {
	color: var(--blue-700);
	text-decoration-color: var(--blue-200);
}
a:hover,
a:focus {
	color: var(--blue-500);
	text-decoration-color: var(--blue-300);
}

body.js .no-js {
	display: none;
}
body:not(.js) .js-only {
	display: none;
}

[hidden] {
	display: none;
}

.author {
	display: flex;
	align-items: center;
	position: relative;
	z-index: 1;
}
.author img {
	max-width: 5rem;
	border-radius: 50%;
	margin-right: var(--spacer-sm);
	box-shadow: var(--box-shadow-lg);
}
.author > * {
	margin: 0;
}

header > nav {
	background-color: var(--blue-100);
	padding: var(--spacer-base);
	box-shadow: var(--box-shadow-lg);
}

/* CIRCLES LAYOUT */
@media (min-width: 68rem) {
	.title {
		margin-left: 6ch;
		margin-bottom: var(--spacer-md);
	}
	header > nav {
		margin-left: -20rem;
		float: left;
		shape-outside: circle(21rem at 1.5rem 40%);
		padding: 3.5rem 6.5rem 3.5rem 9rem;
		margin-top: -5.5rem;
		margin-right: 3rem;
		margin-bottom: 3rem;
		border-radius: 50%;
	}
	header > nav > * {
		margin-left: 2rem;
	}
}
header > nav > ul {
	font-size: 1rem;
	margin-top: var(--spacer-xs);
}
header > nav * {
	margin-top: 0;
}
header > nav li {
	padding-top: var(--spacer-xs);
}

header > nav > h2 {
	font-size: 1rem;
	display: flex;
}
toggle-button {
	display: flex;
	align-items: center;
	position: relative;
}
toggle-button > button {
	background-color: transparent;
	border: 0;
	display: flex;
	align-items: center;
}
toggle-button > button::after {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0.5;
	width: 100%;
	height: 100%;
	content: "";
}
toggle-button svg {
	transition: transform 200ms ease;
}
toggle-button [aria-expanded="true"] svg {
	transform: rotate(90deg);
}
.hide {
	display: none;
}
@media screen and (min-width: 68rem) {
	toggle-button button {
		display: none;
	}
	.hide {
		display: block;
	}
	header > nav li {
		padding-top: 0;
	}
}

body > footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 var(--body-padding-x) var(--spacer-sm);
	background-color: var(--gray-100);
	font-family: var(--font-family-sans);
}
body > footer img {
	max-width: 3rem;
}

blockquote,
pre,
figure,
.negative-padding {
	--container-width: calc(
		var(--default-container-width) + var(--body-padding-x) * 2
	);
}

blockquote {
	display: flex;
	background-color: white;
	padding: var(--spacer-sm) var(--spacer-base);
	box-shadow: var(--box-shadow-md);
	align-items: center;
}
blockquote blockquote-quote {
	display: flex;
	justify-content: center;
}
blockquote blockquote-quote::before {
	content: "‟";
	font-size: 3rem;
	font-family: var(--font-family-serif);
	color: var(--indigo-200);
	height: 3rem;
	margin-right: var(--spacer-sm);
}
blockquote > * {
	margin: 0;
}

.em-list {
	list-style-type: none;
	font-size: 2rem;
	background-color: white;
	box-shadow: var(--box-shadow-lg);
	padding-left: var(--body-padding-x);
	margin-bottom: var(--spacer-md);
	position: relative;
	display: grid;
	grid-template-columns: var(--spacer-md) 1fr;
	grid-template-rows: 1fr 1fr;
	grid-column-gap: var(--spacer-sm);
}
.em-list > * {
	line-height: 1.2;
	grid-column-start: 2;
	padding: var(--spacer-xs);
	margin: 0;
	display: flex;
	align-items: center;
}
.em-list [data-and] {
	font-size: 3rem;
	color: var(--indigo-500);
	grid-row: 1 / 3;
	grid-column-start: 1;
	align-self: center;
	justify-self: center;
}
.em-list a {
	text-decoration: none;
	color: var(--indigo-900);
}
.em-list li:not([data-and]):hover {
	background-color: var(--gray-100);
}

figure {
	background-color: white;
	box-shadow: var(--box-shadow-lg);
	margin: var(--spacer-base) calc(-1 * var(--body-padding-x));
}
figcaption {
	padding: var(--spacer-base);
	background-color: var(--gray-100);
}

.horizontal-scroll {
	overflow-x: auto;
}

.no-grid-message {
	position: relative;
}
.no-grid-message::before {
	content: "Your browser does not support CSS Grid so this demo will not work correctly";
	color: var(--gray-900);
	background-color: var(--gray-300);
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: var(--spacer-md);
}
@supports (display: grid) {
	.no-grid-message::before {
		content: "";
		display: none;
	}
}

.responsive-web-design {
	background-color: var(--indigo-100);
}
.accessible-web-design {
	background-color: var(--orange-100);
}

del {
	font-style: italic;
}
del code,
del a {
	text-decoration: line-through;
	font-family: unset;
}

ins,
ins code {
	text-decoration: none;
}

.insert {
	background-color: white;
	padding: var(--body-padding-x);
	box-shadow: var(--box-shadow-md);
}