/* Variables */
:root {
	--color-light: #EEE5E9;
	--color-dark: #2B2D42;
	--color-accent: #6D3D14;
}

/* Phones */
@media screen and (orientation: portrait) {
	nav  {	margin-left: 0.5em; }
	body {
		max-width: 99%;
		margin-left: 0.5em;
	}
	ul.multi-column	{ column-count: 2; }
}
/* Desktop */
@media screen and (orientation: landscape) {
	nav  {	margin-left: 24vmax; }
	body {
		max-width: 50vmax;
		margin-left: 24vmax;
	}
	ul.multi-column	{ column-count: 4; }
}

/* Fonts */
@font-face {
	font-family: Merriweather;
	src: url(/eo/resumo-monata/fonts/Merriweather-Regular.ttf);
}
@font-face {
	font-family: Merriweather;
	src: url(/eo/resumo-monata/fonts/Merriweather-Bold.ttf);
	font-weight: bold;
}
@font-face {
	font-family: Merriweather;
	src: url(/eo/resumo-monata/fonts/Merriweather-Italic.ttf);
	font-style: italic;
}
@font-face {
	font-family: Merriweather;
	src: url(/eo/resumo-monata/fonts/Merriweather-BoldItalic.ttf);
	font-style: italic;
	font-weight: bold;
}
@font-face {
	font-family: EBGaramond;
	src: url(/eo/resumo-monata/fonts/EBGaramond-VariableFont_wght.ttf);
	font-style: normal;
}
@font-face {
	font-family: EBGaramond;
	src: url(/eo/resumo-monata/fonts/EBGaramond-Italic-VariableFont_wght.ttf);
	font-style: italic;
}
@font-face {
	font-family: Spectral;
	src: url(/eo/resumo-monata/fonts/Spectral-Regular.ttf);
}
@font-face {
	font-family: Spectral;
	src: url(/eo/resumo-monata/fonts/Spectral-SemiBold.ttf);
	font-weight: bold;
}
@font-face {
	font-family: Spectral;
	src: url(/eo/resumo-monata/fonts/Spectral-Italic.ttf);
	font-style: italic;
}
@font-face {
	font-family: Spectral;
	src: url(/eo/resumo-monata/fonts/Spectral-BoldItalic.ttf);
	font-style: italic;
	font-weight: bold;
}

/* Everything else */
img {
	margin: 0;
	vertical-align: bottom;
}

body { background-color: var(--color-light); }
* { font-family: Merriweather; }
h1, h2 { font-family: EBGaramond; }
h1 > span {
	font-family: Spectral;
	font-size: 80%;
	color: var(--color-accent);
}
h1 {
	font-size: 2.8em;
	text-align: right;
	color: var(--color-dark);
}
h1 a {
	font: inherit;
	color: inherit;
	text-decoration: inherit;
}
h2 { font-size: 2.05em; padding-left: 1em; color: var(--color-dark); }
h3 { font-size: 1.25em; color: var(--color-accent); }
p { text-align: justify; }
q { font-style: italic; quotes: none; user-select: text; }
iframe { width: 100%; }

summary {
	color: var(--color-dark);
	cursor: pointer;
	user-select: none;
}