:root {
	--border-radius: 1rem;
	--color-background: #242424;
	--color-background-darker: #121212;
	--color-background-lighter: #353535;
	--color-primary: #634677;
	--content-padding: 1.5rem;
	--min-content-width: 300px;
	--max-content-width: 640px;
}

/*
Background container
*/

body, html {
	background-color: var(--color-background);
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	min-width: var(--min-content-width);
}

body {
	border-color: var(--color-primary);
	border-style: solid;
	border-width: 5px 0 4px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	line-height: 1.5;
	min-height: 100vh;
}

/*
Typography sizes
*/

h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
	margin: 0;
}

h1, h1 a {
	font-size: 3.0rem;
}

h2, h2 a {
	font-size: 2.3rem;
}

h3 {
	font-size: 2.1rem;
}

h4 {
	font-size: 1.9rem;
}

h5 {
	font-size: 1.7rem;
}

h6, a, p, li {
	font-size: 1.5rem;
}

figcaption, figcaption a {
	font-size: 1.2rem;
}

/*
Content container
*/

main {
	flex-grow: 1;
	margin: 0 auto;
	max-width: var(--max-content-width);
	padding: var(--content-padding);
}

/*
Header from content separation
*/

hr {
	background-color: var(--color-background-lighter);
	border: none;
	height: 2px;
	margin: var(--content-padding) 0;
}

/*
Lists
*/

ul li {
	list-style-type: circle;
}

/*
Links
*/

a {
	text-decoration: underline;
	text-decoration-color: var(--color-primary);
	text-decoration-thickness: 3px;
}

a:hover {
	filter: brightness(1.1);
}

/*
General sizing of figures and contents, including margin reset as some browsers add one by default
*/

figure {
	margin: var(--content-padding) 0;
}

figure img {
	display: block;
	height: auto;
	max-width: 100%;
}

/*
Figure captions should have a little bit of breathing room
*/

figcaption {
	padding: calc(var(--content-padding) / 2) var(--content-padding);
}

/*
Figure images and captions should differentiate themselves from the background and each other
*/

figure img {
	background-color: var(--color-background-lighter);
}

figcaption {
	background-color: var(--color-background-darker);
}

/*
Figure images and captions should be rounded to ease transitions
*/

figure img {
	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);
}

figure.no-caption img, figcaption {
	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
}

/*
De-emphasizing content
*/

a, body {
	color: #dddddd;
}

small {
	color: #aaaaaa;
}