:root {
  --light-yellow: #fefef6;
  --dark-yellow: #ffffe1;
  --accent-color: #b8d2d4;
  /*63abd3*/
  --dark-blue: #074B73;
}

html, body {
  margin: 0;
}

.speech {
  display: none;
}

@media speech {
  .speech {
    display: block;
  }
}

body {
  counter-reset: articlenum articlenumtoc;
  font-size: 20pt;
  font-family: "Cabin", sans-serif;
  font-weight: 400;
  font-style: normal;
  background-color: var(--light-yellow);
  color: var(--dark-blue);
}

video {
  margin: auto;
  width: 100%;
}

article header::before {
  counter-increment: articlenum;
  content: counter(articlenum);
  font-size: 68pt;
  color: #ccc;
  position: absolute;
  top: -20pt;
  left: 0pt;
  z-index: -1;
}

nav {
  font-family: brothers;
  font-size: 14pt;
  padding: 12pt 0 64pt 0;
}
@media(min-width:800px) {
  nav {
    padding: 32pt 0 64pt 0;
  }
}

nav h1, nav h2, nav p {
  text-align: center;
}
nav h1, nav li {
  text-transform: uppercase;
}
nav h1 em {
  font-size: 8pt;
  color: #aaa;
  vertical-align: baseline;
}


nav ul {
  list-style: none;
}

li {
  display: flex;
  justify-content: space-between;

  width: 90%;
}
nav a {
  text-decoration: underline;
  color: var(--dark-blue);
}
.madebycommunity {
  width: 100px;
  opacity: 0.3;
  float: left;
  margin-right: 8pt;
  vertical-align: top;
}
nav p {
  font-size: 10pt;
  text-transform: normal;
  width: 80%;
  margin: auto;
  margin-top: 12pt;
  color: #888;

  font-family: "Cabin", sans-serif;
  font-style: italic;
}

nav p a {
  color: var(--accent-color);
}
ul.simple-list {
  list-style-type: circle;
}
li:not('.simple-list'):nth-child(2n+1) {
  font-size: 10pt;
}

li:not('.simple-list'):nth-child(2n) {
  margin-bottom: 14pt;
}

li .rule {
  flex-grow: 2;
  border-bottom: dotted 3px var(--dark-blue);
  height: 12pt;
  margin: 0pt 2pt 0 2pt;
}

.numeral::after {
  counter-increment: articlenumtoc;
  content: counter(articlenumtoc);
}

li span {
  float: right;
}

header {
  font-size: 20pt;
  font-family: brothers, serif;
  text-align: center;
  margin-top: 24pt;
  text-transform: uppercase;
  position: relative;
}

.separator {
  height: 100px;
  width: 100%;
  margin: 100px 0 0 0;
  /*background: var(--accent-color);*/
}

header>em {
  font-size: 8pt;
  display: block;
}

.p {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12pt;
  min-width: 200px;
  display: block;
  margin-top: 42pt;
}
.p + figure img {
  margin-top: 42pt;
}
figure figcaption {
  margin-bottom: 42pt;
}

section hr {
  margin-top: 40px;
}



blockquote {
  quotes: "\201C""\201D""\2018""\2019";
  width: 100%;
  margin: 0;
  margin-top: 12pt;
  margin-bottom: 12pt;
  font-size: 20pt;
  float: left;
  font-style: italic;
}
blockquote:before {
  color: #fec;
  content: "\201C";
  font-size: 4em;
  line-height: 0.1em;
  margin-right: -0.14em;
  vertical-align: -0.4em;
}
blockquote .p {
  display: inline;
}
q {
  /*font-style: italic;*/
  quotes: "\201C""\201D""\2018""\2019";
}
article {}

aside,section {
  position: relative;
  padding: 0 24pt 0 24pt;
}

section {
  display: block;

}



aside header {
  font-size: 32pt;
  border-width: 6px;
  font-weight: 400;

  -webkit-column-span: all;
  column-span: all;
}

aside .p {
  font-size: 16pt;
  font-family: brothers, serif;
  text-transform: uppercase;
  margin-bottom: 42pt;
}



.all-columns {
  -webkit-column-span: all;
  column-span: all;

}

hr {
  border: 0;
  border-bottom: 8px solid var(--dark-blue);
  border-top: 3px solid var(--accent-color);
  margin: 0;

  -webkit-column-span: all;
  column-span: all;
}

hr+figure {
  margin: 0;
}

.faded {
  background: #bbb;
  height: 3px;
  display: block;
  margin: auto;
  margin-bottom: 32pt;
}

footer {
  font-size: 12pt;
}

section img {}


figure {
  margin: 0;
}
figcaption {
  font-style: italic;
  font-size: 8pt;
  text-align: center;
  text-transform: uppercase;
  font-family: brothers, serif;
  color: var(--accent-color);
  background: var(--dark-blue);
  margin-top: -10px;
  padding: 6pt 12pt 6pt 12pt;
}

img {
  width: 100%;
  max-width: 100%;
}




footer, .footer {
  padding: 20pt;
  background: var(--dark-blue);
  color: var(--light-yellow);
}

footer a, footer a:visited, footer a:hover {
  color: #fff !important;
}

footer img {
  width: 105px;
}


.toc-link {
  position: absolute;
  top: -16pt;
  right: 16pt;
  font-size: 12pt;
}
.story .p {
  color: #222;
  /*max-width:600px;*/
  margin: 0;
  margin-top: 20pt;
  padding: 0 0em 0 0em;
  font-size: 12pt;
  font-family: "Alice", serif;
}



.p .all-columns {
  margin: 32pt;

}
/*
	hr, blockquote{
	  display:block;
	  margin-top:20px !important;
	}
	*/
/*
	section{
	  padding-bottom:20px;
	}
	*/

@media (max-width: 360px) {
  .p {
    min-width: 0;
    width: 100%;
  }
  aside,section {
    padding: 3px;
  }
  footer {
    font-size: 6pt;
    overflow-x: scroll;
  }

}

@media (min-width: 600px) {
  section {
    -webkit-columns: 2 200px;
    -moz-columns: 2 200px;
    columns: 2 200px;
    -webkit-column-gap: 2em;
    -moz-column-gap: 2em;
    column-gap: 2em;
    -webkit-column-rule: 1px dotted #ddd;
    -moz-column-rule: 1px dotted #ddd;
    column-rule: 1px dotted #ddd;
    margin-top: 16pt;
    margin-bottom: 16pt;
  }

  blockquote {
    width: unset;

  }
  .story .p {
    font-size: 16pt;
  }
  article .p {
    margin-top: 16pt;

  }
  figure {
    break-inside: avoid-column;
  }

  li .rule {
    margin-top: 5pt;
  }
  nav {
    font-size: 20pt;
  }
}

@media (min-width: 1800px) {
  .body-container {
    max-width: 1800px;
    font-size: 18pt;
    margin: auto;

  }
  blockquote {
    margin-right: 18pt;

  }
  aside header {
    font-size: 80pt;
  }
  section,article,.p {
    font-size: 16pt;
  }

  figcaption {
    font-size: 12pt;
  }
  aside .p {
    font-size: 28pt;
    font-family: brothers, serif;
  }

}

@media (min-width: 1200px)and (max-width: 1799px) {
  .body-container {
    max-width: 1200px;
    font-size: 22pt;
    margin: auto;
  }
  blockquote {
    margin-right: 18pt;
  }
}