.forties-heading, .title-drop { color: #582ECE; font-family: "Playfair Display", serif; font-size: 2.5em; font-weight: 900; margin: 0.40em 0 0.50em 0.125em; }

.forties-body { color: #14201B; background-color: #DCC9B8; font-family: "Josefin Slab", serif; font-size: 30px; font-weight: 425; line-height: 1.15em; }

.forties-body main { max-width: 35em; margin: 0.625em auto 0.5em auto; }

.modern-heading, header, h2 { color: #582ECE; font-size: 3em; font-weight: 900; margin: 1em 0 0.425em 0.1em; }

.modern-body, body { color: #DCC9B8; background-color: #14201B; font-family: "Work Sans", sans-serif; font-size: 30px; font-weight: 400; line-height: 1.1875em; word-spacing: -0.0625em; }

main, .modern-body main { max-width: 39em; margin: 0.625em auto 0.5em auto; }

.ooc-heading { font-family: "Gochi Hand", cursive; color: #AD9178; font-size: 2.75em; font-weight: 900; margin: 0.5em 0 0.1em 0; }

.ooc-body { color: #DCC9B8; background-color: #543F45; font-family: "Sue Ellen Francisco", cursive; font-size: 42px; line-height: 1.475em; word-spacing: -0.025em; }

.ooc-body main { max-width: 27em; margin: 0 auto; }

.title-drop { font-family: "Playfair Display SC", "Playfair Display", serif; text-align: center; font-size: 3.25em; line-height: 0.875em; font-weight: 400; }

body { text-align: justify; margin: 0; }

header { background-color: #582ECE; top: 0; width: 100%; margin: 0; position: sticky; border-bottom: 0.125em solid #DCC9B8; font-family: "Work Sans", sans-serif; display: grid; grid-template-columns: 1fr; grid-template-rows: 1em 1.125em; }

.ooc-body header, .forties-body header { font-size: 90px; line-height: 35.625px; word-spacing: -1.875px; }

.header-title-div { display: flex; grid-row: 1; }

.header-title-div h1 { margin: 0.125em 0; }

a.header-title { font-family: "Playfair Display SC", "Playfair Display", serif; font-size: 0.5em; margin: 0.25em; text-decoration: none; }

a.header-title:link { color: #DCC9B8 !important; }

a.header-title:visited { color: #DCC9B8 !important; }

a.header-title:focus, a.header-title:hover { color: #14201B; text-decoration: underline; }

.hide-header-button, .show-header-button { color: #DCC9B8; background-color: #14201B; fill: #DCC9B8; height: 6em; min-width: 9em; display: block; border-style: solid; border-width: 0.25em; border-color: #DCC9B8; font-family: "Work Sans", sans-serif; }

.show-header-button { display: none; position: fixed; margin-left: 1em; }

.show-header-button-icon, .hide-header-button-icon { height: 3em; width: 3em; margin: auto; }

header nav { display: flex; grid-row: 2; margin: 0.125em 0.25em 0 0.25em; }

.nav-links { display: flex; flex: 4; }

nav a { font-size: 0.5em; font-style: italic; margin: 0.45em auto auto auto; text-decoration: none; }

nav ul { display: none; }

a:link, .modern-body a:link { color: #543F45; font-weight: 700; }

a:visited, .modern-body a:visited { color: #AD9178; }

a:focus, a:hover, .modern-body a:focus, .modern-body a:hover { color: #582ECE; }

header a:link { color: #14201B !important; }

header a:visited { color: #AD9178 !important; }

header a:focus, header a:hover { color: #DCC9B8 !important; background-color: unset !important; }

.forties-body a:link, .ooc-body .forties-body a:link { color: #543F45; font-weight: 700; }

.forties-body a:visited, .ooc-body .forties-body a:visited { color: #AD9178; }

.forties-body a:focus, .forties-body a:hover, .ooc-body .forties-body a:focus, .ooc-body .forties-body a:hover { color: #582ECE; background-color: unset !important; }

.ooc-body a:link { color: #AD9178; }

.ooc-body a:visited { color: #14201B; }

.ooc-body a:focus, .ooc-body a:hover { color: #DCC9B8; background-color: #582ECE; }

.title-drop a { color: #582ECE; line-height: 1em; text-decoration: none; }

.title-drop a:focus, .title-drop a:hover { color: #AD9178; text-decoration: underline; }

h2 { font-style: italic; text-align: left; }

h2 + p { margin-top: 0; }

details { background-color: unset !important; }

details[open].modern-body { background-color: #14201B !important; padding: 0 .25em .50em .25em; }

details[open].ooc-body { background-color: #543F45 !important; padding: 0 .25em .50em .25em; }

summary.modern-heading { font-size: 0.75em; color: #AD9178; }

summary.ooc-heading { font-size: 0.75em; }

details + h2 { margin-top: 0.25em; }

@media (max-width: 1500px) { header { grid-template-rows: 0.75em 1em; }
  a.header-title { font-size: 0.4em; }
  .hide-header-button, .show-header-button { height: 5em; min-width: unset; width: 6em; }
  .hide-header-button-icon, .show-header-button-icon { height: 2em; width: 2em; } }

@media (max-width: 1300px) { main, .modern-body main { margin: 0.625em 5em 0.5em 5em; }
  a.header-title { font-size: 0.35em; }
  nav a { font-size: 0.4em; } }

@media (max-width: 1100px) { body, .modern-body { font-size: 25px; }
  header { border-bottom-width: 0.0625em; }
  .hide-header-button, .show-header-button { height: 4em; width: 7.25em; }
  .hide-header-button-text, .show-header-button-text { font-size: 0.85em; } }

@media (max-width: 900px) { main, .modern-body main { margin: 0.5em 3em 0.5em 3em; }
  header { grid-template-rows: 0.5em 0.95em; }
  a.header-title { font-size: 0.25em; }
  .hide-header-button, .show-header-button { height: 4.5em; width: 5em; }
  .hide-header-button-icon, .show-header-button-icon { height: 1.75em; width: 1.75em; }
  nav a { font-size: 0.35em; } }

@media (max-width: 800px) { body, .modern-body { font-size: 20px; }
  main, .modern-body main { margin: 0.5em 3.5em 0.5em 3.5em; }
  .hide-header-button, .show-header-button { height: 3.5em; width: 7.25em; }
  .hide-header-button-icon, .show-header-button-icon { height: 1.5em; width: 1.5em; } }

@media (max-width: 725px) { .hide-header-button, .show-header-button { height: 5.5em; width: 3.5em; }
  .hide-header-button-icon, .show-header-button-icon { height: 1.5em; width: 1.5em; } }

@media (max-width: 625px) { main, .modern-body main { margin: 0.5em 3.5em 0.5em 3.5em; } }

@media (max-width: 575px) { body, .modern-body { font-size: 15px; }
  main, .modern-body main { margin: 0.625em 2em 0.5em 5em; } }

@media (max-width: 450px) { body, .modern-body { font-size: 13px; }
  header { grid-template-rows: 0.5em 2.75em; }
  a.header-title { font-size: 0.2em; }
  .nav-links { flex: 1; flex-direction: column; }
  nav a { font-size: 0.45em; margin: 0.25em 0.5em; } }

@media (max-width: 375px) { body, .modern-body { font-size: 10px; } }