/******* global *********/
*,
*::before,
*::after {
	box-sizing: border-box;
}

/******* fonts ********/
/***
@font-face { font-family: ZillaSlab; font-weight: 200; src: url('/static/fonts/ZillaSlab-Light.ttf'); }
@font-face { font-family: ZillaSlab; font-weight: 400; src: url('/static/fonts/ZillaSlab-Regular.ttf'); }
@font-face { font-family: ZillaSlab; font-weight: 700; src: url('/static/fonts/ZillaSlab-Bold.ttf'); }

@font-face { font-family: Alfa; font-weight: 400; src: url('/static/fonts/AlfaSlabOne-Regular.ttf'); }
@font-face { font-family: Calistoga; font-weight: 400; src: url('/static/fonts/Calistoga-Regular.ttf'); }

@font-face { font-family: Courgette; font-weight: 400; src: url('/static/fonts/Courgette-Regular.ttf'); }
@font-face { font-family: GreatVibes; font-weight: 400; src: url('/static/fonts/GreatVibes-Regular.ttf'); }
@font-face { font-family: Pinyon; font-weight: 400; src: url('/static/fonts/PinyonScript-Regular.ttf'); }
@font-face { font-family: Fredericka; font-weight: 400; src: url('/static/fonts/FrederickatheGreat-Regular.ttf'); }
@font-face { font-family: Quattrocento; font-weight: 400; src: url('/static/fonts/Quattrocento-Regular.ttf'); }
@font-face { font-family: Quattrocento; font-weight: 700; src: url('/static/fonts/Quattrocento-Bold.ttf'); }
@font-face { font-family: Lilita; font-weight: 400; src: url('/static/fonts/LilitaOne-Regular.ttf'); }
@font-face { font-family: Abril; font-weight: 400; src: url('/static/fonts/AbrilFatface-Regular.ttf'); }
****/

@font-face { font-family: Parisienne; font-weight: 400; src: url('/static/fonts/Parisienne-Regular.ttf'); }
@font-face { font-family: EBGaramond; font-weight: 400; src: url('/static/fonts/EBGaramond-Regular.ttf'); }
@font-face { font-family: EBGaramond; font-weight: 700; src: url('/static/fonts/EBGaramond-Bold.ttf'); }
@font-face { font-family: Sedan; font-weight: 400; src: url('/static/fonts/SedanSC-Regular.ttf'); }
@font-face { font-family: Cedarville; font-weight: 400; src: url('/static/fonts/CedarvilleCursive-Regular.ttf'); }

:root {
	--font_heading: "Parisienne", cursive;
	--font_ui: "Sedan", serif;
	--font_text: "EBGaramond", serif; 
	--font_hand: "Cedarville", serif; 

	font-size: clamp(18px, 2.4vw, 24px);
}

/******* colors *******/

:root {
	/**--color_background: #EFE2D4;**/
	--color_background: #F4F6F5;
	--color_text: #595D48;
	--color_ui: #D87127;
	--color_ui_text: #EFE2D4;
}

/******* body *********/

body {
	font-family: var(--font_text);
	padding: 0;
	margin: 0;
	background: var(--color_background);
	color: var(--color_text);
}

.hidden {
	visibility: hidden;
	display: none;
}

/******* headings *********/

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

h1       { font-size: 2.0em;	margin: 1.4rem 0;		font-weight: 400; }
h2       { font-size: 1.7em; 	margin: 1.2rem 0;     	font-weight: 400; }
h3       { font-size: 1.4em; 	margin: 1.0rem 0;     	font-weight: 400; }
h4,h5,h6 { font-size: 1.0em; 	margin: 0.5rem 0 0 0; 	font-weight: 700; }

h1 {
	width: 100%;
	text-align: center;
}

/***** paragraphs *****/

p {
	line-height: 1.4;
	margin: 0.6em 0;
}

.big {
	font-size: 1.5em;
}
.small {
	font-size: 0.66em;
}

/***** links *****/

a {
	text-decoration: none; 
}
main a {
	font-weight: bold;
	color: var(--color_ui);
}
a:hover {
	text-decoration: underline;
}

/***** lists *****/

ul, ol {
	margin: 0.4em 0;
	padding-left: 1.2em; 
	list-style-position: outside;
	line-height: 1.6;
}
li {
	text-align: left;
}

/***** images *****/

img {
	margin: 1.5em 0;
	display: block;
	width: auto;
	max-width: 100%; 
}

/***** horizontal line *****/

hr {
	width: 100%;
	border: none;
	border-bottom: 1px dotted var(--color_text);
	margin: 1.2em 0; 
}


/******** nav **********/

nav {
	background-color: var(--color_ui);
	color: var(--color_ui_text);
	font-family: var(--font_ui);
}
nav a {
	color: var(--color_ui_text);
}


/********* button ***********/

button, input[type="submit"], input[type="button"] {
	display: block;
	margin: 0.2em 0;
	padding: 0.1em 0.5em;
	width: 10em;

	font-family: var(--font_ui);
	text-align: center;
	font-size: 1.20em;

	cursor: pointer;

	border: 2px solid var(--color_ui);
	transition: 0.3s; /* Hover Transition Time */

	background-color: var(--color_ui);
	color: var(--color_ui_text);
}

button:hover, input[type=submit]:hover, input[type=button]:hover {
	background-color: inherit;
	color: var(--color_ui);
}

button.gray, input[type=button].cancel {
	border: 2px solid #676;
	background-color: #676;
}

button.gray:hover, input[type=button].cancel:hover {
	background-color: inherit;
	color: inherit;
}