body {
  background: #fffeee;
  font-family: "mantana", "arial", serif;
  font-size: 0.93rem;
}

h1 {
  font-size: 2.15rem;
}

h2 {
  font-family: 'Mantara';
  font-size: 1.4rem;
}

h3 {
  font-family: 'Mantara';
  font-size: 1.1rem;
}

h4 {
  font-size: 1rem;
}

/* Container/wrapper for "page" content. */
.main {
  width: 750px;
  margin: 0 auto;
}

.title {
  text-align: center;
  padding: 0.1rem 0.1rem 0 0.1rem;
}

.title p {
  font-weight: bold;
}

/* Left/right split subtitles. Used for top and bottom of page (date/subtitle, est./page #).*/
.sub {
  width: 100%;
}

.heading {
  border-bottom: 1px #000 solid;
  border-top: 3px #000 double;
  padding-bottom: -2px;
  font-weight: bold;
}

.footer {
  border-bottom: 3px #000 double;
  border-top: 1px #000 solid;
}

.sub-left {
  float: left;
}

.sub-right {
  text-align: right;
  float: right;
}

.sub-left,
.sub-right {
  padding: 0.5em 0.375em 0.2em 0.375em;
}

/* Make a bunch of things display in all-caps without actually being all-caps.*/
.title,
.heading,
h1,
h2,
h3,
h4,
readmore,
.first-word {
  text-transform: uppercase;
  text-align: center;
}

/* Column layout for main text. */
.columns {
  columns: 3;
}

/* Container for content, including splash images.*/
.articles {
  display: block;
  padding: 1rem 0.275rem;
}

.articles p {
  text-indent: 1em;
  line-height: 1.375em;
  margin: 0.1em;
  text-align: justify;
}

.articles h1,
.articles h2,
.articles h3,
.articles h4 {
  margin-top: 0.1em;
  margin-bottom: 0.375em;
  display: table; /* so headlines they don't get broken up across columns*/
}

.block-column-article {
  display: table; /*special use case? currently unused*/
}

/* For big front-page images that take up full width.*/
.splash {
  padding-bottom: 0rem;
}

/* Gap between pages. */
hr {
  max-width: 750px;
  border: 0px;
  height: 2px;
  background: none;
  margin: 1.25rem auto;
}

/* Line break between articles, sections etc. */
.main hr {
  height: 1px;
  border: 0px;
  background: #000;
  margin: 0.8rem 0 1rem 0;
}

/* Blockquote with fancy curly quote decoration. */
.articles blockquote {
  margin: 0;
  display: block;
}

.blockquote-inner {
  font-weight: bold;
  margin: 0.1rem;
  margin: 1rem 2rem 0 2rem;
  display: block;
  font-size: 1.2em;
  border: 0px solid red;
}

.articles .blockquote-inner p {
  text-indent: 0;
  text-align: center;
}

.articles blockquote:before,
.articles blockquote:after {
  font-size: 4.5rem;
  margin: 0;
  padding: 0 0.25rem;
  position: relative;
  height: 1.5rem;
  border: 0px solid green;
}

/* Insert the fancy curly quotes */
.articles blockquote:before {
  content: "“";
  float: left;
  top: -0.35rem;
}

.articles blockquote:after {
  content: "”";
  float: right;
  top: -1.35rem;
}

/* Put this after blockquotes and the sub-left, sub-right pairs
 * to make the 'float' effect work correctly without messing up
 * the parent element and/or breaking subsequent formatting.
 */
clearfix {
  content: "";
  display: block;
  clear: both;
  margin: 0;
  padding: 0;
  height: 0;
}

/* "continued..." */
.articles .readmore p,
.articles .continued p {
  font-size: 0.89em;
  text-indent: 0;
}

.articles .readmore p {
  font-weight: bold;
  text-align: right;
  margin: 0.5rem 0 0 0;
}

.articles .readmore:after {
  display: block;
  height: 0.1rem;
  content: "";
}

/* "continued from..." */
.continued p {
  font-style: italic;
  margin: 0.5rem 0;
}

.articles img {
  display: block;
  max-width: 100%;
  height: auto;
  text-align: center;
  margin: 0.5rem auto;
  filter: grayscale(90%); /*make images almost black-and-white*/
}

/* Optional hover effect on images.*/
.articles img:hover {
  filter: grayscale(75%);
}

/*Tweaks for smaller screens + mobile devices.*/

@media (max-width: 754px) {
  .main {
    width: 100%;
  }
  .columns {
    columns: 2;
  }
}

@media (max-width: 500px) {
  h1 {
    font-size: 1.95rem;
  }

  h2 {
    font-size: 1.1rem;
  }

  h3 {
    font-size: 0.975rem;
  }

  h4 {
    font-size: 0.92rem;
  }
  .sub-left,
  .sub-right {
    max-width: 50%;
  }

  body {
    font-size: 0.87rem;
  }

}
.columns h3 {
  margin-top: 0;
}
button {
  display: inline-block;
  background: rgba(76, 99, 143, 0);
  border: none;
}
button:hover {
  cursor: pointer;
}

.mobile-only {
  display: none;
}

@media (max-width: 767px) {
  .mobile-only {
    display: block;
  }
}

input {
  pointer-events: auto;
  touch-action: auto;
}
.wrapperdown {
  display: inline-block;
  position: relative;   
}

.dropdown {
  display: none;
  position: absolute;
  flex-direction: column;
  padding: 5px;
  gap: 5px;
  z-index: 9999;   
  width: max-content;
}

#toggler:checked ~ .dropdown {
  display: flex; 
}

label[for="toggler"] {
  display: inline-block;    
  cursor: pointer;       
}