/* playfair-display-regular - latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/playfair-display-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Playfair Display Regular'), local('PlayfairDisplay-Regular'),
       url('fonts/playfair-display-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/playfair-display-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/playfair-display-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/playfair-display-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/playfair-display-v15-latin-regular.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */
}
/* playfair-display-700 - latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/playfair-display-v15-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Playfair Display Bold'), local('PlayfairDisplay-Bold'),
       url('fonts/playfair-display-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/playfair-display-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/playfair-display-v15-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/playfair-display-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/playfair-display-v15-latin-700.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */
}
/* playfair-display-italic - latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/playfair-display-v15-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Playfair Display Italic'), local('PlayfairDisplay-Italic'),
       url('fonts/playfair-display-v15-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/playfair-display-v15-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/playfair-display-v15-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/playfair-display-v15-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/playfair-display-v15-latin-italic.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */
}
/* playfair-display-900 - latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/playfair-display-v15-latin-900.eot'); /* IE9 Compat Modes */
  src: local('Playfair Display Black'), local('PlayfairDisplay-Black'),
       url('fonts/playfair-display-v15-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/playfair-display-v15-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/playfair-display-v15-latin-900.woff') format('woff'), /* Modern Browsers */
       url('fonts/playfair-display-v15-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/playfair-display-v15-latin-900.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */
}
/* playfair-display-700italic - latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/playfair-display-v15-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local('Playfair Display Bold Italic'), local('PlayfairDisplay-BoldItalic'),
       url('fonts/playfair-display-v15-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/playfair-display-v15-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/playfair-display-v15-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/playfair-display-v15-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/playfair-display-v15-latin-700italic.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */
}
/* playfair-display-900italic - latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 900;
  src: url('fonts/playfair-display-v15-latin-900italic.eot'); /* IE9 Compat Modes */
  src: local('Playfair Display Black Italic'), local('PlayfairDisplay-BlackItalic'),
       url('fonts/playfair-display-v15-latin-900italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/playfair-display-v15-latin-900italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/playfair-display-v15-latin-900italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/playfair-display-v15-latin-900italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/playfair-display-v15-latin-900italic.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */
}


:root {
	--background-light: #f7f6f4;
	--background-dark: #545249;
	--foreground-light: #545249;
	--foreground-dark: #f7f6f4;

	--background: var(--background-light);
	--foreground: var(--foreground-light);

}

* {margin:0;padding:0;}
html, body {
	min-height: 100vh;
	background: var(--background);
}
body {
	font-family: 'Playfair Display', serif;

	color: var(--foreground);
	display: grid;
	margin: 3em;
	grid-template-columns:10% 90%;
	grid-template-rows: 10% 85% 5%;
	grid-template-areas: ". header" "sidebar main" "sidebar footer";
}
a {
	color: inherit;
	text-decoration: none;
	transition: .2s;
}
a:hover {
	color:#33322D;
}
header{
	grid-area: header;
	text-align: center;
}
header h1 {
	font-weight: 900;
	letter-spacing: 0.03em;

}
main {
	grid-area: main;
}
main ul {
	padding-left: 2em;
}
main ul li {
	padding: initial;
}
footer {
	grid-area: footer;
}
aside {
	grid-area: sidebar;
}
header ul, footer ol {
	list-style: none;
}
header ul li, footer ol li {
	display: inline-block;
	padding: 0 1em;
    text-transform: uppercase;
}
aside nav {
	padding: initial;
	line-height: 1.8;
}
aside ul {
	list-style-type: square;
}
aside nav>ul>li{
	list-style-type: none;
}
aside nav>ul>li>a {
	font-size: 1.4em;

}
aside nav>ul>li>ul {
	padding-left: 1em;
	text-align: initial;
}
article h4{
	color: #B2AE9F;
}
h1, h2, h3, h4, h5, h6 {
	line-height: 2.2em;

}
footer ol {
	font-size: 1.2em;
}
footer .version {
	font-size: smaller;
	display: block;
	text-align: center;
}
main article p {
	line-height: 1.6em;
	padding-top: 1em;
}

@media (max-width: 639px) {
	aside { display:none; }
	body {margin: 1em;}
}

@media (prefers-color-scheme: dark) {
	:root {
		--background: var(--background-dark);
		--foreground: var(--foreground-dark);
	}
}
