/* variables */

:root {
	--text-link-color: #da5437;
	--text-link-color-hover: #572708;
	--text-emphasis-color: #572708;
	--text-normal-color: #2e190b;

	--background-color: #fae0c4;
	--sitenav-background-color: #572708;

	--menu-separator-character: "‖";
}

.hidden {
	display: none !important;
}

@media screen and (width < 400px) {
	body {
		overflow-x: scroll !important;
	}
}

body {
	min-height: 100vh;
	color: var(--text-normal-color);
}

/*FONTS*/

@font-face {
	font-family: "Gabriela";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/gabriela/v22/qkBWXvsO6sreR8E-b8m5xLs.woff2)
		format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "EB Garamond";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/ebgaramond/v31/SlGUmQSNjdsmc35JDF1K5GR1SDk.woff2)
		format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* emphasis font */
h1 {
	font-family: "Gabriela", serif;
	font-size: 32px;
}

h2 {
	font-family: "Gabriela", serif;
	font-size: 26px;
}

h3,
h4,
h5 {
	font-family: "Gabriela", serif;
	font-size: 22px;
}

/* body font */
a,
li,
label,
span,
input,
p {
	font-family: "EB Garamond", serif;
	font-size: 22px;
	font-style: normal;
}

.ninepatch_box {
	margin: 10px;
	background-color: var(--sitenav-background-color);
	border-image: url(/img/box.9.png) 20 20 20 20 fill round;
	border-image-width: 15px;
	border-image-outset: 9px;
}

.ninepatch_paper {
	margin: 6px;
	border-image: url(/img/paper_edge.9.png) 12 12 12 12 fill round;
	border-image-width: 12px;
	border-image-outset: 5px 9px 7px 6px;
}

.ninepatch_paper_2 {
	margin: 6px;
	border-image: url(/img/paper_edge_2.9.png) 30 30 30 30 fill;
	border-image-repeat: repeat;
	border-image-width: 12px;
	border-image-outset: 5px 9px 7px 6px;
}

.ninepatch_paper_3 {
	margin: 0px;
	border-image: url(/img/paper_edge_3.9.png) 0 fill;
	border-image-width: 0px;
	border-image-outset: 1px;
	transform-style: preserve-3d;
}

.ninepatch_title {
	border-image: url(/img/title.9.png) 65 140 100 140 fill stretch;
	border-image-width: 16px 40px 20px 40px;
	border-image-outset: 16px 40px 6px 40px;
}

/* universal background color */
body {
	background-color: var(--background-color);
	min-height: 100vh;
	margin: 0;
	max-width: 100vw;
}

html,
body {
	/*overflow-x: hidden;*/
	display: flex;
	flex-flow: column nowrap;
	/*align-content: space-between;*/
}

/* clearfix hack to prevent image overflow. check out the W3Schools page on it. */
.clearfix::after {
	content: "";
	clear: both;
	display: table;
}

/* link colors */
a {
	color: var(--text-link-color);
	text-decoration: none;
	font-weight: bolder;
}

a:hover {
	opacity: 0.7;
}