/* css reset */
*, *::before, *::after {
  box-sizing: border-box;
}
html, body, button, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img,
ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i,
center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section,
summary, time, mark, audio, video {
  margin: 0; padding: 0; border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
b { font-weight: bold; }
em { font-style: italic; }


/* Styling Start */
body {
  line-height: 1.5;
  margin: auto;
  color: black;
  background-color: #333;
  font-family: Verdana, sans-serif;
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-family: 'Alfa Slab One', serif;
  font-weight: normal;
  font-size: 300%;
  text-align: center;
  color: rgb(22 49 86 / 1);
}
h1.cover {
  margin-left: -1rem; margin-right: -1rem;
}
.fontpreload {
  font-family: 'Alfa Slab One', serif;
  font-weight: normal;
}

h2, p.subtitle, div.question h3 {
  font-family: 'Alexandria', Arial, sans-serif;
  font-weight: bold;
}

p.subtitle {
  font-size: 130%;
  margin-top: 1.2em;
  margin-bottom: 0.83em;
  text-align: center;
}

h2 {
  font-size: 140%;
  margin-top: 1.5em;
  margin-bottom: 0.83em;
}

p {
  margin-top: 1em;
  margin-bottom: 1em;
}

img.cover {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

div#content, div#content-dynamic {
  max-width: 46em;
  padding: 1em 1em;
  margin: auto;
  background-color: white;
}
div#padding {
  max-width: 52em;
  margin: auto;
  background-color: white;
}

a.xref, a.xref:visited { text-decoration: underline; color: inherit;}
a.xref:hover { text-decoration: underline; color: #001ca6;}

a.subtle, a.subtle:visited { text-decoration: underline; color: gray;}
a.subtle:hover { text-decoration: underline; color: #001ca6;}

div.footer {
  margin-top: 1em;
  font-size: 100%;
  color: gray;
  text-align: center;
}
div.footer a, div.footer a:visited {
  color: gray;
}


a.button {
  margin-left: auto;
  margin-right: auto;
  border-radius: 0.9em;
  color: white;
  display: flex;
  align-self: center;
  padding: 1.2em 2.8em;
  text-align: center;
  font-size: 120%;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  text-decoration: none;
  /* Permalink - use to edit and share this gradient:
   * https://colorzilla.com/gradient-editor/#1e5799+0,2989d8+50,207cca+51,7db9e8+100;Blue+Gloss+Default */
}
a.button:hover {
  box-shadow: 0 5px 25px rgba(125,185,232,1);
}
a.button, a.smallbutton, a.button-next {
  background: rgb(50 77 114);
  box-shadow: 0 5px 15px rgba(125,185,232,1);
  background: linear-gradient(135deg,  #0c0f1e 0%, rgb(50 77 114) 100%);
  display: inline-block;
}

a.smallbutton {
  border-radius: 0.4em;
  color: white;
  align-self: center;
  padding: 0.8em 1.5em;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  text-decoration: none;
}

a.button-next {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  border-radius: 0.9em;
  color: white;
  padding: 1.2em 2.8em;
  text-align: center;
  font-size: 120%;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  text-decoration: none;
}

div.centering {
  display: flex;
  justify-content: center;
  align-items: center;
  xborder: 1px solid green;
}

div.buttonstack {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em;
}

div.hidden, p.hidden {
  display: none;
}

div.indented {
  padding-left: 2em;
}

/* font awesome svgs */
i>svg { width: 1em; height: 1em; vertical-align: -.125em; display: inline;}
i>svg { fill: currentColor; }



/* quiz page */
div.question p {
  xborder: 1px solid blue;
}
a.choice {
  display: flex;
  align-items: center;

  color: white;
  border-radius: 0.7em;
  padding: 0.5em 1.0em;
  font-family: 'Verdana', sans-serif;
  font-weight: normal;
  text-decoration: none;
  background: rgb(50 77 114);
}
a.choice > i {
  flex-shrink: 0;
}
a.choice > i > svg {
  width: 1.5em;
  height: 1.5em;
  margin-left: 1em;
}
a.choice > span {
  flex-grow: 1;
  margin: 1em 0;
}
.answer-incorrect {
    background-color: #801111 !important;
}
.answer-correct {
    background-color: #477d28 !important;
}
div.question q {
  padding-left: 1em;
  display: block;
  border-left: 2px solid rgb(50 77 114);
  font-style: italic;
}
div.question h3 {
  font-size: 150%;
  text-align: center;
}
div.question-progress {
  text-align: center;
  color: #777;
}
div.question-explanation {
  padding-top: 1em;
}
div.question-title {
  margin-bottom: 1.5em;
}
ul {
    margin-left: 1em;
}

img.quizdiagram {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

img.homelogo {
    border: 2px solid gray;
    margin-top: 2.0em;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

hr {
  width: 70%;
}

/* responsive desktop rules **** must come last  */
@media (min-width: 768px)
{
  img.cover { width: 600px; }
  img.quizdiagram { width: 50%; }
  img.homelogo { width: 50%; }
}