body {
  font-family: 'EB Garamond';
  font-size:1.25rem;
  background-color: var(--base-color);
  color: var(--text-color);
  }
  
  
:root{
  --base-color: #F3F3F3;
  --base-variant: #F3F3F3;
  --text-color: #3D3D3D;
  --secondary-text: #3D3D3D;
  --primary-color: #3D3D3D;
  --accent-color: #E39EAD;
}

.darkmode{
  --base-color: #303030;
  --base-variant: #3D3D3D;
  --text-color: #F3F3F3;
  --secondary-text: #a4a5b8;
  --primary-color: #F3F3F3;
  --accent-color: #E39EAD;
}

button{
  border: none;
  padding: .4em 2em;
  background-color: var(--accent-color);
  color: var(--base-variant);
  border-radius: 50px;
  font: inherit;
  text-transform: none;
  font-weight: 600;
  cursor: pointer;
}


button:hover{ 
 background-color: var(--text-color);
   color: var(--base-variant);
 } 

  
.cta-button{
  background-color: var(--accent-color);
}

h1 {
  font-size: 2.15rem; 
  font-family: "EB Garamond";
  text-align:center;
  }  

h2 {
  font-size: 1.4rem;
  }

h3 {
  font-size: 1.1rem;
    font-family: "EB Garamond";
  }

h4 {
  font-size: 1rem;
    text-align:right;

  }

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

.title {
  text-align: center;
  padding: 0.1rem 0.1rem 0 0.1rem;
  }
  
.title p {
  font-weight:bold;
  }
  
  


a:link, a:visited {
  color: #D697A0;
  text-decoration: underline;
}

a:hover, a:active {
  color: #7FA4B8;
  text-decoration: underline;


}





/* Left/right split subtitles. Used for top and bottom of page (date/subtitle, est./page #).*/
.sub {
  width: 100%;
  }
  
.heading {
  border-bottom:1px solid;
  border-top: 3px double;
  padding-bottom: -4px;
  font-weight: none;
  color: var(--text-color);
  }
  
  
  
.footer {
  border-bottom: 3px double;
  border-top:1px solid;
  color: var(--text-color);
  }
  
  
  
  


.sub-left {
  float: left;

  }

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

  }
  
.sub-left, .sub-right {
  padding: 0.2em 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: none;
  }
  
/* Column layout for main text. */
.columns {
  columns: 1;
  }

/* 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;
    text-align-last: center;

  }
  
.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: 2.15rem;
  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: "\201C";
  float: left;
  top:-0.35rem;
  }

.articles blockquote:after {
  content: "\201D";
  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;
  }


#theme-switch{
  height: 30px;
  width: 30px;
  padding: 0;
  border-radius: 50%;
  background-color: var(--base-variant);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 20px;
  right: 20px;
}
#theme-switch svg{
  fill: var(--primary-color);
}
#theme-switch svg:last-child{
  display: none;
}
.darkmode #theme-switch svg:first-child{
  display: none;
}
.darkmode #theme-switch svg:last-child{
  display: block;
}

.only-on-dark {
  display: none;
}





/* eb-garamond-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/eb-garamond-v30-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* eb-garamond-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/eb-garamond-v30-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* eb-garamond-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/eb-garamond-v30-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* eb-garamond-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/eb-garamond-v30-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* eb-garamond-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/eb-garamond-v30-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* eb-garamond-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/eb-garamond-v30-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* eb-garamond-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/eb-garamond-v30-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* eb-garamond-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/eb-garamond-v30-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* eb-garamond-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/eb-garamond-v30-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* eb-garamond-800italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/eb-garamond-v30-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* libre-caslon-text-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/libre-caslon-text-v5-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* libre-caslon-text-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Libre Caslon Text';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/libre-caslon-text-v5-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* libre-caslon-text-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/libre-caslon-text-v5-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* libre-caslon-display-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Libre Caslon Display';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/libre-caslon-display-v16-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

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

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

@media (max-width: 500px) {
  h1 {
  font-size: 1.95rem;
  }  
  
  h2 {
    font-size: 1.1rem;
    }
  
  h3 {
    font-size: 0.975rem;
    text-align: right;
    }

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

  body {
    font-size: 0.87rem;
    }
  }
  arti
  
@media (max-width: 400px) {
  .columns {
    columns: 1;
    }
  }