html, body { width: 100%; height: 100%; }

/* define how the browser calculates width & height */
* { box-sizing: border-box; }

/* import custom fonts */
@font-face { 
	font-family: "BigCaslon-Medium"; 
	src: url("../fonts/BigCaslon.ttf");
}

@font-face { 
	font-family: "JCfg"; 
	src: url("../fonts/Pilgiche.ttf");
}

/* global font styles */
body {
	font-family: "BigCaslon-Medium", serif;
	font-weight: normal;
	font-style: normal;
	font-size: 20px;
	text-rendering: optimizeLegibility;
	line-height: 1.3;
	letter-spacing: 0.05em;
}

p, h1, h2 {
	margin-bottom: 1em;
	margin-left: auto;
	margin-right: auto;
}

h1 {
	text-align: center;
	text-transform: uppercase;
	font-size: 3em;
}

em {
	font-family: "JCfg";
	font-weight: normal;
	font-style: normal;
	letter-spacing: -0.015em;
}

hr { 
	border: none;
	margin: 0;
	border-top: solid 1px;
	margin-top: 2em;
	margin-bottom: 2em;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
}

a { border-bottom: solid 1px; }
a:hover { border-bottom: none; }

.p-call {
	padding-right: 30%;
}

.p-response {
	padding-left: 30%;
	text-align: right;
}

/* center the wrapper on the page */
#wrapper {
	max-width: 650px;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: auto;
	padding: 2.5%;
}

/*  */
#nav {
	background-color: yellow;
}