@font-face {
  font-family: CrimsonSemi;
  src: url('CrimsonText-SemiBold.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: fallback
}

@font-face {
  font-family: JuraSemi;
  src: url('Jura-SemiBold.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: fallback
}

@font-face {
  font-family: JuraReg;
  src: url('Jura-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: fallback
}

:root {
  --yel: #EA8A00;
  --white: #ffffff;
  --bg: #181A1B;
  --gray: #e9eaec;
  --black: #000;
}


* { margin: 0; padding: 0 }
html { width: 100%; height: 100%; overflow: scroll }
body { background: var(--gray) url(grid.png) repeat bottom right; font-family: JuraReg, Times New Roman, serif; font-size: 1em; line-height: 130%; color: var(--black); margin: 10% 2% 0 2% }
h1 { text-transform: lowercase; font-family: CrimsonSemi, Times New Roman, serif; font-size: 180%; text-align: center; margin: 0 0 15px 0 }
h2 { text-transform: lowercase; font-family: JuraSemi, Times New Roman, serif; font-size: 110%; margin-bottom: 20px }
p { font-size: 100%; margin: 0 }
#legal p { margin-bottom: 15px }
ul { margin: 0 }
li {  }
a { color: var(--black); text-decoration: underline }
a:hover { text-decoration: none }
strong { font-family: PopSemi, Helvetica, Verdana, Arial, sans-serif; font-size: 100% }

figure img { max-width: 80% }

.noscript { color: var(--yel); text-align: center; margin: 0; padding: 2rem }
a.anchor { display: block; position: relative; top: -190px; visibility: hidden }
.container { margin: 0 2% 5% 0; padding: 5%; z-index: 100; position: relative; background: var(--white); box-shadow: 5px 10px 10px #888 }
.content { width: 75%; margin: 0 auto }
.info { width: 75%; margin: 0 auto }

#generalHeader { background: var(--white); text-transform: uppercase; width: 100%; z-index: 110 }
.logo { text-align: center }
.logo img { max-height: 100px }

.navFooter ul { margin: 20px 0 0 20px }
.navFooter a {  text-decoration: none }
.navFooter a:hover { color: var(--yel); text-decoration: underline }

@media(min-width: 650px) {
	.container { width: 600px; margin: 0 auto; padding: 2% }
	#generalHeader { width: 100%; margin: 0 auto }
	h1 { text-align: left  }
	figure img { max-width: 100% }
	.container section { display: flex; gap: 20px }
	.container #legal { display: block }
	.content { width: 50% }
	.info { width: 50% }
}