:root {
	--headings-font-family: 'Libre Franklin', 'Franklin Gothic', Arial, sans-serif;
	--headings-font-weight: 700;
	--body-font-family: 'EB Garamond', 'Garamond', 'Baskerville', 'Times New Roman', Times, serif;
	--body-font-weight: 400;
	--line-height: 1.5;
	--single-line-height: 1;

	--photographic-paper-colour: #ebedf3;
	--sticky-note-colour: #efe79e;
	--shadow-colour: #1f1b1455;

	--button-background-colour: #32302d;
	--button-background-colour-darker: #32302d;
	--button-background-colour-lighter: #32302d;
	--button-border-colour: #3d3b38;

	--text-colour: #1f1b14;
	--white-text-colour: #f6f0e7;
	--lines-colour: #be1515;

	--medium-drop-shadow: drop-shadow(0 0.5rem  0.7rem var(--shadow-colour));
	--small-drop-shadow: drop-shadow(0 0.3rem  0.7rem var(--shadow-colour));

	--body-font-size: 1.2rem;
	--body-font-size-portrait: 1.6rem;
}

/* Layout */

/* Layout: Common */
.main-header {
	overflow: hidden;
}

.main-navigation ul, .footer-navigation ul {
	padding: 0 0rem;
	min-height: fit-content;
}

.main-navigation ul li, .footer-navigation ul li {
	margin: 0 1rem;
	padding: 0.5rem 0;
}

.main-navigation ul li div, .footer-navigation ul li h2 {
	margin: 0 0.5rem;
}

.footer-navigation ul li h2 {
	padding: 0.5rem 0;
}

.footer-navigation ul li div {
	margin-right: 1rem;
}

article {
	overflow: hidden;
}

body>footer>nav>ul {
	display: flex;
	justify-content: space-around;
	flex-direction: row;
}

.crayons-navigation div {
	padding: 1rem;
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	margin-top: auto;
}

.crayons-navigation div figure {
	padding: 0.5rem;
}

.crayons-navigation div figure img {
	max-width: 15rem;
}

/* Layout: Landscape and near-square */
@media (min-aspect-ratio: 4/5) {
	body {
		margin: 1rem 10%;
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 1rem
	}

	.crayons-navigation {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem;
	}

	.main-header {
		max-width: fit-content;
	}
	
	article, footer {
		grid-column: 2;
	}

	article figure {
		margin: 2rem;
		float: inline-end;
		max-width: 40%;
		max-height: 50%;
		& img {
			width: 100%;
		}
		& figcaption {
			height: fit-content;
		}
	}

	aside {
		margin: 2rem;
		max-width: 45%;
		clear: both;
	}
}

/* Portrait */
@media (max-aspect-ratio: 4/5) {
	body {
		margin: 1rem;
		display: flow;
	}

	.main-header {
		width: 100%;
	}

	.main-navigation ul {
		display: flex;
		flex-direction: row;
		width: 100%;
	}

	.main-navigation ul li {
		width: 33%;
		margin: 0 1rem;
	}

	article figure {
		margin: 2rem;
		max-width: 100%;
		max-height: 50%;
		& img {
			width: 100%;
		}
		& figcaption {
			height: fit-content;
		}
	}

	/* DO NOT USE ASIDE*/
	aside {
		margin: 2rem;
		max-width: 50%;
	}

	.crayons-navigation div {
		margin: 1rem 0;
	}
}


/* Decorations and style */

body {
	background-color: var(--photographic-paper-colour);
}

article {
	background-image: url("./textures/paper.png");
	background-repeat: repeat;
	background-size: 20%;
	filter: var(--medium-drop-shadow);
	padding: 3rem;
}

.main-navigation ul li, .footer-navigation ul li {
	background-image: url("./textures/paper.png");
	background-repeat: repeat;
	background-size: 20%;
	filter: var(--small-drop-shadow);
}

.main-navigation ul li div, .footer-navigation ul li h2 {
	border-bottom: solid 1px var(--lines-colour);
}

figure {
	background-color: var(--photographic-paper-colour);
	filter: var(--small-drop-shadow);

	padding: 1rem;
	height: fit-content;
}

img {
	border-color: var(--shadow-colour);
	border-style: solid;
	border-width: 0.1rem;
}

aside {
	background-color: var(--sticky-note-colour);
	padding: 1rem;
	filter: var(--small-drop-shadow);
}

.crayons-navigation div {
	background-image: url("./textures/paper.png");
	background-repeat: repeat;
	background-size: 20%;
	filter: var(--small-drop-shadow);
}

/* Fonts and written content */

@font-face {
	font-family: 'Noto Emoji';
	src: url(./fonts/NotoEmoji-VariableFont_wght.ttf) format("truetype");
}

@font-face {
	font-family: 'EB Garamond';
	src: url(./fonts/EBGaramond-VariableFont_wght.ttf) format("truetype");
}

@font-face {
	font-family: 'Libre Franklin';
	src: url(./fonts/LibreFranklin-Regular.ttf) format("truetype");
	font-weight: 400;
}

@font-face {
	font-family: 'Libre Franklin';
	src: url(./fonts/LibreFranklin-Bold.ttf) format("truetype");
	font-weight: 700;
}

body {
	color: var(--text-colour);
}

nav a {
	color: inherit;
	text-decoration: none;
}

.emoji {
	font-family: 'Noto Emoji', 'Noto Color Emoji', 'Segoe UI Emoji', 'Apple Color Emoji';
	font-weight: var(--body-font-weight);
}

.logo {
	font-family: var(--headings-font-family);
	font-weight: var(--headings-font-weight);
	font-size: xx-large;
}

main, nav {
	line-height: var(--line-height);

	& header, header>p, li>h2 {
		font-family: var(--headings-font-family);
		font-weight: var(--headings-font-weight);
		line-height: var(--single-line-height);
	}
	& p, aside, figcaption, .article-date {
		font-family: var(--body-font-family);
		font-weight: var(--body-font-weight);
		font-size: var(--body-font-size);
	}
	& .article-subtitle {
		font-size: x-large;
		font-weight: var(--body-font-weight);
		font-style: italic;
		line-height: var(--single-line-height);
	}
	& figcaption {
		text-align: center;
	}
}

.main-navigation li, .footer-navigation li {
	font-family: var(--headings-font-family);
	font-weight: var(--headings-font-weight);
	color: var(--text-colour);
	text-align: left;
	text-indent: 1rem;
	list-style-type: none;
}

.footer-navigation li div {
	font-family: var(--body-font-family);
	font-weight: var(--body-font-weight);
	font-size: var(--body-font-size);
}

.crayons-navigation {
	font-family: var(--headings-font-family);
	font-weight: var(--headings-font-weight);
	color: var(--text-colour);
	text-align: center;
}

/* Portrait font size overrides */
@media (max-aspect-ratio: 4/5) {
	.footer-navigation li div {
		font-size: var(--body-font-size-portrait);
	}

	main, nav {
		& p, aside, figcaption, .article-date {
			font-size: var(--body-font-size-portrait);
		}
	}
}