html {
	background-color: #A09B95;
	font-family: 'Merriweather', sans-serif;
	font-size: 10px;
}
body {
	margin: 0;
	font-size: 2rem;
	line-height: 2;
	color: #362E40;
}
header {
	background-color: color-mix(in srgb, #C04A3D 90%, white);
	color: #F6F5F2;
}
header > div {
	margin: 0 auto;
	padding: 5rem;
	width: 90rem;
	box-sizing: border-box;
	background-color: #C04A3D;
}
main {
	margin: 0 auto;
	padding: 5rem;
	width: 90rem;
	box-sizing: border-box;
	background-color: #F6F5F2;
}
article, section {
	overflow-wrap: break-word;
}
article :is(h1, h2, h3, p, ul, li) {
	margin: 0 0 1.5rem;
}
article :is(h1, h2, h3) {
	font-weight: normal;
}
article h1 {
	font-size: 5rem;
}
article h2 {
	font-size: 2.5rem;
	text-decoration: underline;
}
article h3 {
	font-size: 2.5rem;
	font-style: italic;
}
footer {
	background-color: color-mix(in srgb, #362E40 95%, white);
	color: #F6F5F2;
}
footer > div {
	margin: 0 auto;
	padding: 5rem;
	width: 90rem;
	box-sizing: border-box;
	background-color: #362E40;
}

nav.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style-type: none;
}
nav.breadcrumbs a {
	color: inherit;
	text-decoration: none;
}
nav.breadcrumbs a:hover {
	padding: 0 0 1rem;
	border-bottom: .2rem solid #F6F5F2;
}
nav.breadcrumbs li:first-child {
	margin: 0 2rem 0 0;
}
nav.breadcrumbs li:first-child a {
	display: block;
	width: 6.8rem;
	height: 6.8rem;
	border-radius: 50%;
	background: #8C594F url('/images/logo.png') no-repeat 0 / 6.8rem;
}
nav.breadcrumbs li:first-child a:hover {
	padding: 0;
	border-bottom: none;
}
nav.breadcrumbs li:nth-child(n+2):not(:last-child)::after {
	margin: 0 1rem;
	font-weight: bold;
	content: '›';
}

nav.footer ol {
	margin: 0;
	padding: 0 0 0 2.5rem;
	list-style-type: none;
}
nav.footer > ol {
	padding-left: 0;
}
nav.footer li {
	padding: 0 0 .5rem 0;
}
nav.footer a {
	display: inline-block;
	padding: .4rem 1rem;
	background-color: #C04A3D;
	color: inherit;
	text-decoration: none;
}
nav.footer a:hover {
	padding-bottom: .2rem;
	background-color: transparent;
	border-bottom: .2rem solid #F6F5F2;
}
nav.footer + p {
	margin: 2.5rem 0 0;
	font-style: italic;
}

nav.categories {
	margin: 0 0 2.5rem;
}
nav.categories ul {
	margin: 0 0 -.5rem;
	padding: 0;
	list-style-type: none;
}
nav.categories li {
	display: inline-block;
	margin: 0 .5rem .5rem 0;
}
nav.categories a {
	display: inline-block;
	padding: .4rem 1rem;
	background-color: #333;
	color: #fff;
	text-decoration: none;
}
nav.categories a:hover {
	padding-bottom: .2rem;
	background-color: inherit;
	border-bottom: .2rem solid #06a;
	color: #06a;
}

section.lessons a {
	display: block;
	margin: 0 0 2.5rem;
	color: inherit;
	text-decoration: inherit;
}
section.lessons a:last-child {
	margin: 0;
}
section.lessons strong {
	display: block;
	margin: 0 0 .5rem;
	padding: .6rem 1rem;
	background-color: #C04A3D;
	color: #F6F5F2;
	font-weight: normal;
}
section.lessons a:hover strong {
	padding-bottom: .4rem;
	background-color: inherit;
	border-bottom: .2rem solid #C04A3D;
	color: #C04A3D;
	font-weight: normal;
}
section.lessons p {
	margin: 0;
}
section.lessons time {
	margin: 0 1rem 0 0;
	padding: .5rem 1rem;
	font-size: 1.9rem;
	background-color: #362E40;
	color: #F6F5F2;
}

section.lesson .meta {
	display: flex;
	margin: 0 0 2.5rem;
}
section.lesson .meta > div {
	padding: 0 0 .5rem;
	border-bottom: .2rem solid #C04A3D;
}
section.lesson .meta span {
	font-style: italic;
}
section.lesson .meta .author {
	flex: 1;
	margin: 0 1.25rem 0 0;
}
section.lesson .meta .date {
	flex: 1;
	margin: 0 0 0 1.25rem;
	text-align: right;
}
section.lesson h1 {
	margin: 0 0 2rem;
	font-size: 5rem;
	line-height: initial;
}
section.lesson h2 {
	margin: 0 0 2rem;
	font-size: 2.5rem;
	font-style: italic;
}
section.lesson :is(h3, h4, h5, h6) {
	margin: 0 0 2rem;
	font-size: 2rem;
	text-decoration: underline;
}
section.lesson :is(.intro, .core-explanation, .takeaways, .examples, .exercises) {
	margin: 0 0 2.5rem;
}
section.lesson :is(.intro, .core-explanation, .takeaways, .examples, .exercises) p {
	margin: 0 0 2.5rem;
}
section.lesson .intro {
	font-style: italic;
}
section.lesson :is(.core-explanation, .takeaways, .examples, .exercises) :is(ol, ul) {
	padding: 0 0 0 4rem;
	margin: 0 0 2.5rem;
	list-style-type: none;
}
section.lesson :is(.core-explanation, .takeaways, .examples, .exercises) li {
	position: relative;
	margin: 0 0 1rem;
}
section.lesson :is(.core-explanation, .takeaways, .examples, .exercises) li::before {
	content: '';
	display: block;
	position: absolute;
	left: -4rem;
	top: 1.25rem;
	width: 1.5rem;
	height: 1.5rem;
	background-color: #C04A3D;
}
section.lesson .takeaways {
	padding: 0 0 0 2.5rem;
	border-left: .2rem solid #C04A3D;
}
section.lesson .dialogue p {
	margin: 0 0 1rem;
}
section.lesson .dialogue p:nth-child(even) {
	color: #C04A3D;
}
section.lesson .exercise-item details {
	margin: 0 0 2.5rem;
	border: .2rem solid #C04A3D;
}
section.lesson .exercise-item summary {
	margin: 1rem 2.5rem;
	cursor: pointer;
}
section.lesson .exercise-item .explanation {
	margin: 2.5rem;
}

section.lesson .related ol {
	padding: 0;
	margin: 0;
	list-style-type: none;
}
section.lesson .related li {
	position: relative;
	margin: 0 0 2.5rem;
}
section.lesson .related li::before {
	content: '';
	display: block;
	position: absolute;
	left: -3.25rem;
	top: 1.25rem;
	width: 1.5rem;
	height: 1.5rem;
	background-color: #C04A3D;
}
section.lesson .related li:last-child {
	margin: 0;
}
section.lesson .related a {
	padding: .8rem 1rem;
	background-color: #C04A3D;
	box-decoration-break: clone;
	color: #F6F5F2;
	text-decoration: none;
}
section.lesson .related a:hover {
	padding-bottom: .6rem;
	background-color: inherit;
	border-bottom: .2rem solid #C04A3D;
	color: #C04A3D;
}

:focus {
    outline: none;
}

@media screen and (max-width: 1024px) {
	header > div, main, footer > div {
		width: 100%;
		background-size: 100%;
	}
}
@media screen and (max-width: 800px) {
	nav.categories a {
		padding: .2rem .8rem;
	}
	nav.categories a:hover {
		padding-bottom: 0;
	}
	section.lesson .related a {
		padding: .6rem .8rem;
	}
	section.lesson .related a:hover {
		padding-bottom: .4rem;
	}
}
@media screen and (max-width: 480px) {
	header > div, main, footer > div {
		padding: 2.5rem;
	}
	nav.breadcrumbs a:hover {
		padding: 0;
		border-bottom: none;
	}
}