body {
  --color-bright-blue: #9999cc;
  --color-brightest-gray: #cccccc;
  --color-darkest-blue: #00003399;
  --color-darkest-gray: #00000099;
  --color-orange: orange;
  --color-white-020: #ffffff33;
  --color-white-010: #ffffff1d;
  --font-family-caveat: "Caveat", cursive;
  --font-family-kalam: "Kalam", cursive;
  --font-family-noto-serif: "Noto Serif", "Century Schoolbook", Georgia, Times, serif;
  color: var(--color-brightest-gray);
  font-family: var(--font-family-noto-serif);
  text-align: center;
  margin: 4px;
}
div {
  margin: 4px;
}
audio {
  margin: 4px 8px;
  width: 960px;
}
figure {
  margin: 4px 8px;
  background-color: #eee;
}
figcaption {
  color: #333;
}
footer {
  font-family: var(--font-family-kalam);
}
/* h1, h2, h3, h4 { */
h2, h3, h4 {
  font-family: var(--font-family-kalam);
  font-weight: normal;
  font-style: italic;
}
h1 {
  font-family: var(--font-family-caveat);
  font-weight: normal;
  font-style: italic;
}
h1 {
  font-size: 3rem;
  margin: 0 0.5rem;
}
h2 {
  font-size: 1.5rem;
  margin: 0;
}
h3 {
  font-size: 1.2rem;
  margin: 0.6rem 0;
}
h4 {
  font-size: 1rem;
  margin: 0.6rem 0;
}
header {
  margin-bottom: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
header h1, h2, h3, p{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
p {
  margin: 1rem 0;
}
section {
  margin: 4px;
  border: 1px solid var(--color-orange);
  background-color: var(--color-white-010);
  padding-top: 4px;
}
img, audio {
  width: 100%;
  margin: 0px;
}
img {
  max-width: 960px;
  height: auto;
}
audio {
  max-width: calc(100% - 2.8rem);
  height: auto;
}
.audio-container {
  /* text-align: left; */
  width: 100%;
  max-width: 960px;
  height: auto;
  padding: 8px;
  background-color: var(--color-white-010);
  font-family: var(--font-family-kalam);
  font-style: italic;
}
/* classes */
.max-width {
  max-width: 100%;
  height: auto;
  width: 100%;
}
.nowrap {
  white-space: nowrap;
}
span .nowrap {
  padding: 4px;
}
.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.video-180x320 {
  width: 180px;
  height: 320px;
}
/* ids */
#grad14 {
  background-image: repeating-linear-gradient(45deg, var(--color-darkest-blue), var(--color-darkest-gray) 1%, var(--color-darkest-blue) 2%),
      repeating-linear-gradient(-45deg, var(--color-darkest-blue), var(--color-darkest-gray) 1%, var(--color-darkest-blue) 2%);
}
#main-heading {
  font-weight: bold;
  text-shadow: 2px 2px 4px #000000;
}
#button-autoplay {
  width: 2.5rem;
  text-align: center;
  vertical-align: top;
  padding: 0.25rem 0rem;
  color: #fff;
  background-color: #000;
  font-size: 1.5rem;
  border: none;
  margin: 0px;
  /* text-decoration: line-through; */
}
#button-autoplay :hover {
  color: #6af;
}