/* -------------------- */
/*     Load fonts       */
/* -------------------- */
/* League Gothic Regular 400 */
@font-face {
  font-display: swap;
  font-family: 'League Gothic';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/league-gothic-v13-latin-regular.woff2') format('woff2');
}
/* Spectral Regular 400 */
@font-face {
  font-display: swap;
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/spectral-v15-latin-regular.woff2') format('woff2');
}
/* Spectral Regular Italic 400 */
@font-face {
  font-display: swap;
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/spectral-v15-latin-italic.woff2') format('woff2');
}
/* Spectral Medium 500 */
@font-face {
  font-display: swap;
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/spectral-v15-latin-500.woff2') format('woff2');
}
/* Spectral SemiBold 600 */
@font-face {
  font-display: swap;
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/spectral-v15-latin-600.woff2') format('woff2');
}
/* Spectral Bold 700 */
@font-face {
  font-display: swap;
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/spectral-v15-latin-700.woff2') format('woff2');
}
/* Spectral Bold Italic 700 */
@font-face {
  font-display: swap;
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/spectral-v15-latin-700italic.woff2') format('woff2');
}
/* Roboto Regular 400 */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-v50-latin-regular.woff2') format('woff2');
}
/* Roboto SemiBold 600 */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/roboto-v50-latin-600.woff2') format('woff2');
}
/* Roboto ExtraBold 800 */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 800;
  src: url('fonts/roboto-v50-latin-800.woff2') format('woff2');
}

/* -------------------- */
/*   GLOBAL             */
/* -------------------- */
html,body,div,span,h1,h2,h3,p,blockquote,pre,address,cite,code,strong,em,img,ol,ul,li,section,figure,figcaption,footer,header {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
}
html {
	font-size: 20px; /* 1rem is 16px KEY FOR DYNAMIC */
}
*, *::before, *::after {
  	box-sizing: border-box; /* Keep padding within max width */
}
body {
	line-height: 1.3;
	font-family: Spectral, serif;
}
body,html {
	background-color: #cccccc;
}
a {
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	background: transparent;
}
/* -------------------- */
/*   HEADER             */
/* -------------------- */
header {
    max-width: 100%; /* KEY FOR DYNAMIC */
	background-color: white;
    padding: 0;
    margin: auto; /* float center - same for section and footer */
    font-family: Roboto, sans-serif;
    font-size: 1.0rem;
}
/* ----------------------- */
/*  MAIN SECTION           */
/* ----------------------- */
body > section {
    max-width: 100%; /* KEY FOR DYNAMIC */
    background: white;
    margin: auto; /* float center - same for header and footer */
    padding-top: 1.25rem;
    padding-bottom: 0.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    border-top: 20px solid #cccccc;
    border-bottom: 3px solid #cccccc;
}
body > section p, ul, ol, figure {
    padding-bottom: 1rem;
    font-size: 1.1rem;
    border: 0px solid green;
}
body > section a {
    text-decoration: underline;
    color: #3E5DB7;
}
body > section strong {
	font-weight: 600;
}
/* ----------------------- */
/*  HEADINGS		       */
/* ----------------------- */
h1 {
  	font-family: Roboto, sans-serif;
  	color: black;
	text-align: left;
	font-weight: 600;
	font-size: 1.6rem;
	padding-bottom: 0.5rem;
}

/* -------------------- */
/*   FOOTER             */
/* -------------------- */
footer {
	max-width: 100%; /* KEY FOR DYNAMIC */
	background: #E8E8E8;
	font-family: Roboto, sans-serif;
	font-size: 1rem;
	margin: auto;  /* float center - same for header and section */
	padding-top: 0.75rem;
	padding-bottom: 0;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
	clear: both;
	border-bottom: 80px solid #cccccc;
}
footer p {
	padding-bottom: 0.75rem;
	overflow-wrap: break-word;
}
footer a {
    text-decoration: underline;
    color: #3E5DB7;
}
/* -------------------- */
/*   Desktop Settings   */
/* -------------------- */
@media screen and (min-width: 768px) {
html {
	font-size: 16px; /* 1rem is 16px KEY FOR DYNAMIC */
}
header {
    max-width: 600px; /* KEY FOR DYNAMIC */
	}
body > section {
    max-width: 600px;
    padding-top: 1.25rem;
    padding-left: 1.25rem; /* 4 of 6 */
    padding-right: 1.25rem; /* 5 of 6 */
    padding-bottom: 0.25rem; /* 6 of 6 */
}
footer {
	max-width: 600px; /* KEY FOR DYNAMIC */
	}
}