:root {
	--accent: #ffbbbb;
	--grey: #444;
	--bg: #Cd5c5c;
	--text: #dddddd;
}

html {
	font-size: 100%;
	scroll-behavior: smooth;
}

body {
	font-family: Inter, sans-serif;
	line-height: 1.65;
	color: #dddddd;
	background-color: #662222;
}

.flex-wrapper {
	display: flex;
	flex-wrap: wrap;
}

.content-wrapper {
	flex:20%;
	margin: 1rem;
}
.
.image-wrapper {
	flex: 50%;
}

img {
	max-width: 100%;
	max-height: 100vh;
}

@media (max-width: 1px) {
	.content-wrapper, .image-wrapper {
		flex: 100%;
	}
}


.page-footer {
	text-align: center;
	margin-bottom: 8px;
}

a[href] {
	color: var(--accent);
}

a[href]:hover {
	text-decoration: none;
}

a[href]:focus {
	outline: 2px solid var(--accent);
	outline-offset: 4px;
}

.footnotes {
	font-size: 0.8em;
}


h1, h2, h3, h4, h5 {
	font-family: "Playfair Display";
	font-style: normal;
	line-height: 1.15;
}

h1 {
	font-size: 3.052em;
}

h2 {
	font-size: 2.441em;
}

h3 {
	font-size: 1.953em;
}

h4 {
	font-size: 1.563em;
}

h5, .larger {
	font-size: 1.25em;
}

small {
	font-size: 0.8em;
}