@import url("https://fonts.googleapis.com/css2?family=Questrial&family=Roboto+Slab:wght@100..900&family=Sometype+Mono:ital,wght@0,400..700;1,400..700&display=swap");

:root {
	--sans-serif: "Questrial", sans-serif;
	--serif: "Roboto Slab", serif;
	--monospace: "Sometype Mono", monospace;

	--primary-font: var(--sans-serif);
	--header-font: var(--serif);
}

body {
	font-family: var(--primary-font);
	margin: 0px;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: #e1d3c6;
	color: #000;
}

a.skip_link {
	position: absolute;
	top: -1000px;
	z-index: 1000;
}
a.skip_link:focus {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 10px;
	background-color: #fff;
	color: #000;
	text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--header-font);
}

div.page {
	display: flex;
	flex-direction: column;
}

.desktop-header, .mobile-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background-color: #e4d7cc;
	padding: 20px;
	box-shadow: 0px 0px 10px #0001;
}

.desktop-header > *, .mobile-header  > * {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 20px;
}

.mobile-header {
	display: none;
}

.site-home {
	text-decoration: none;
	color: #000;
}

.logo {
	width: 150px;
	filter: drop-shadow(0px 0px 6px #000a);
}

.site-title {
	margin: 0px;
}
.site-description {
	margin: 0px;
}

.hero {
	height: 720px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

article {
	width: 700px;
	margin: auto;
	font-size : 18px;
}

article p, article li {
	line-height: 1.5;
}

blockquote {
	margin : 0px;
	padding : 1px;
	padding-left : 20px;
	border-left : 3px solid #d7ada1;
	background : #e8dad3;
}

footer {
	padding: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}