/*  --------- Responsiveness  ---------  */

html {width: 100%;}

@viewport {width: device-width; zoom: 1.0;}

@media screen and (orientation: landscape) {
  body {font-size: max(1em, 26px);}
  nav {padding-left: 1em !important;}
  nav li {font-size: 1.2em;}
  footer {border-radius: 30% 30% 0 0;}
}

@media screen and (orientation: portrait) {
  body {font-size: 1em;}
  nav {padding-left: 0em;}
  footer {border-radius: 0;}
}

/* --------- Headers  --------- */
main h1, h2, h3, h4, h5, h6 {font-weight: normal; font-family: 'Libre Baskerville'; margin-bottom: 0.5em;}
main h1 {line-height: 1.3em; margin: 0.5em 0em 0.3em 0em;}
main h3, h4, h5, h6 {border-bottom: 1px solid #95b5c5; margin-bottom: 0.2em;}
header h1 {
	font-size: 2.5em; 
	font-family: Dyslexie, OpenDyslexic, 'Mansalva', Verdana, Arial, Serif; 
	margin: 0em; 
	margin-bottom: 0.5em;
}

/* --------- Main regions  --------- */

body {
  background-image: url("/plain-bg.png");
  background-color: #327797;
  background-repeat: repeat;
  background-attachment: fixed;
  color: #00060a;
  font-family: Dyslexie, OpenDyslexic, 'Atkinson Hyperlegible', Verdana, Arial, Serif;
  line-height: 1.7em;
  margin: 0px;
  height: 100vh;
}

header, nav, footer {
	background: rgb(52,123,148);
	background: linear-gradient(90deg, rgba(40, 91, 113, 0.7) 0%, rgb(53, 125, 151) 50%, rgba(40, 91, 113, 0.7) 100%);
}

header {
 display: block;
 font-family: Dyslexie, OpenDyslexic, 'Atkinson Hyperlegible', Arial, serif;
 color: #E6E6E6;
 margin: 0px;
 text-align: center;
 /* The background won't fill properly without this line due to collapsing margins */
 padding: 1.5em 0.5em 0.2em 0.5em;
}

nav {
 font-family: Dyslexie, OpenDyslexic, 'Atkinson Hyperlegible', Arial, serif;
 color: #E6E6E6;
 text-decoration: none;
 padding: 0 0.5em 0.9em 0.5em;
 line-height: 1.3em;
 font-size: 0.9em;
 margin: 0px;
 text-align: center;
 border-radius: 0 0 50% 50%;
 box-shadow: 0px 5px 5px 0px #13426a;
}

main {
  background-color: #d3e5e2;
  background: linear-gradient(90deg, rgba(230,242,240,0.85) 0%, rgba(211,229,226,1) 10%, rgba(211,229,226,1) 90%, rgba(230,242,240,0.80) 100%);
  border: 2px solid #2c6275;
  border-radius: 10px;
  box-shadow: 0px 5px 10px 0px #0f3556;
  margin: 0.5em auto 2.6em auto;
  padding: 0.4em 1.2em 3em 1.2em;
  word-wrap: break-word;
  max-width: 80ch;
}

footer {
  /* Attached to bottom of screen at all times */
  position: fixed;
  margin: 0px;
  bottom: 0;
  left: 0;
  width: 100%;
  /* Prevents the footer from getting in the way */
  height: min(7%, 2.1em);
  line-height: 2.1em;
  padding: auto 0;
  /* Aesthetic styling */
  /* border-top: 4px solid #3FAB99; */
  color: white;
  font-size: 0.9em;
  text-align: center;
}
/* Ensures the text stays centered and on-screen */
footer p {margin: auto auto;}

/* -------- Links --------- */

main a:link {text-decoration: underline;}
a:visited {text-decoration: underline;}
a:hover, a:focus {text-decoration: underline; color: #05447A;}
nav a {color: white; text-decoration: none;}


/* -------- Focused --------- */
a:focus {
 outline: 2px solid red; 
 border-radius: 5px;
 background: rgb(255,255,255,0.5);
 padding: 0 0.2em;
}
nav a:hover {color: white;}

footer:hover, footer:focus, #footerlink:focus > footer {
	/* When hovering over footer bar, make it obviously clickable */
	border-top: 4px solid red;
	cursor: pointer;
}

/* -------- Lists --------- */

ul {margin-top: 0.2em; margin-bottom: 0.5em;}
ul li::last-of-type {margin-bottom: 0.5em;}

ol > li::marker {font-weight: bold;}

dl {padding: 1em;}
dt {font-weight: bold; padding: 0.1em;}
dd {padding: 0.1em;}

details ul {padding-top: 1em;}
details p ~ ul {padding-top: 0em;}

nav ul li {
   display: inline-block;
   margin: 0px;
   padding: 0px;
   padding-right: 0.6em;
}

nav ul {
	margin: 0px;
	padding: 0px;
}

/* -------- Other text --------- */

address {font-style: normal;}
sup {color: blue;}
sup:hover {color: #05447A; cursor: help;}
dfn {font-weight: bold; font-style: normal;}
main p {margin: 0px auto 0px auto; padding: 0.5em;}

blockquote {
  color: #3B3B3B;
  border-left: 1px solid #3B3B3B;
  padding-left: 1em;
  margin-left: 1em;
}

aside {
  font-style: normal;
  padding: 0.3em;
  margin: 0.2em;
  border: 3px dotted #95b5c5;
  border-radius: 10px;
}

details {
 border-bottom: 2px dotted #95b5c5; 
 padding-top: 0.2em;
}

details details {
  border-bottom: none;
  padding-left: 1em;
  padding-bottom: 1em;
}

summary:hover {
  cursor: pointer;
  color: #002497;
}

/* -------- Visuals --------- */

hr {border: 2px solid #95b5c5; margin: 1em;}

img {
  padding: 0.7em 0em;
  max-width: 100%;
  height: auto;
}

mark {background-color: #f4f5a4;}

/* -------- Fonts --------- */

/* mansalva-regular - latin */
@font-face {
  font-family: 'Mansalva';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/mansalva/mansalva-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/mansalva/mansalva-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/mansalva/mansalva-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/mansalva/mansalva-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/mansalva/mansalva-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/mansalva/mansalva-v12-latin-regular.svg#Mansalva') format('svg'); /* Legacy iOS */
}

/* libre-baskerville-regular - latin */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/libre-baskerville-v9-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/libre-baskerville-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/libre-baskerville-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/libre-baskerville-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/libre-baskerville-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/libre-baskerville-v9-latin-regular.svg#LibreBaskerville') format('svg'); /* Legacy iOS */
}

/* atkinson-hyperlegible-regular - latin */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/hyperlegible/atkinson-hyperlegible-v10-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/hyperlegible/atkinson-hyperlegible-v10-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/hyperlegible/atkinson-hyperlegible-v10-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/hyperlegible/atkinson-hyperlegible-v10-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/hyperlegible/atkinson-hyperlegible-v10-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/hyperlegible/atkinson-hyperlegible-v10-latin-regular.svg#AtkinsonHyperlegible') format('svg'); /* Legacy iOS */
}

/* atkinson-hyperlegible-italic - latin */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic;
  font-weight: 400;
  src: url('/fonts/hyperlegible/atkinson-hyperlegible-v10-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/hyperlegible/atkinson-hyperlegible-v10-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/hyperlegible/atkinson-hyperlegible-v10-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/hyperlegible/atkinson-hyperlegible-v10-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('/fonts/hyperlegible/atkinson-hyperlegible-v10-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/hyperlegible/atkinson-hyperlegible-v10-latin-italic.svg#AtkinsonHyperlegible') format('svg'); /* Legacy iOS */
}

/* atkinson-hyperlegible-700 - latin */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/hyperlegible/atkinson-hyperlegible-v10-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/hyperlegible/atkinson-hyperlegible-v10-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/hyperlegible/atkinson-hyperlegible-v10-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/hyperlegible/atkinson-hyperlegible-v10-latin-700.woff') format('woff'), /* Modern Browsers */
       url('/fonts/hyperlegible/atkinson-hyperlegible-v10-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/hyperlegible/atkinson-hyperlegible-v10-latin-700.svg#AtkinsonHyperlegible') format('svg'); /* Legacy iOS */
}

/* atkinson-hyperlegible-700italic - latin */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic;
  font-weight: 700;
  src: url('/fonts/hyperlegible/atkinson-hyperlegible-v10-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/hyperlegible/atkinson-hyperlegible-v10-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/hyperlegible/atkinson-hyperlegible-v10-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/hyperlegible/atkinson-hyperlegible-v10-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('/fonts/hyperlegible/atkinson-hyperlegible-v10-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/hyperlegible/atkinson-hyperlegible-v10-latin-700italic.svg#AtkinsonHyperlegible') format('svg'); /* Legacy iOS */
}