@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap');

body {
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  font-size: 1.3rem;
  line-height: 1.6;
}

strong, b {
  font-weight: 700;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 300;
  margin: 1.4rem 0;
} 

/*h1 { font-size: (3.157) * 1rem; }
h2 { font-size: (2.369) * 1rem; }
h3 { font-size: (1.777) * 1rem; }
h4 { font-size: (1.333) * 1rem; }
h5 { font-size: (1.250) * 1rem; }
*/

h1 { font-size: 3.75rem; }
h2 { font-size: 3rem; }
h3 { font-size: 2.625rem; }
h4 { font-size: 2.25rem; }
h5 { font-size: 1.875rem; }
h6 { font-size: 1.5rem; }

blockquote {
  font-style: italic;
  font-size: 1.25rem;
  background: #fff;
  border-left: .25rem solid #aaa;
  padding: 0.25rem 2rem;
  margin: 1.5rem auto;
  // quotes: "\201C""\201D""\2018""\2019";
}

.footnotes {
  font-size: 85%;
}
.post-series {
  font-size: 85%;
}

/* Series */
.series-list {
   margin: 2rem auto;
}
ul.series-list {
   list-style-type: none;  
   padding-left: 0;
}
.series-list ul li {
   list-style-type: none;
}
.series-list ul li a {
   color: black;
}
.series-list ul li a:hover {
   color: #018fe2;
}
.series-list ul li a.current {
   position: relative;
}
.series-list ul li a.current:before {
   content: "> ";
   position: absolute;
   left: -1rem;
}
.series-list.teaser li {
   padding-left: 2.25rem;
}

.card-narrow img {
  height: auto;    
  max-width: 100%;
}
.card-wide {
  clear: both;
  margin: 1rem 0;
}
.card-wide img {
  display: block;
  max-width: 100%;
  height: auto;
}
.card-wide h5 {
  margin-top: 0;
}

.main-image img {
  margin: 1rem 0;
}
img {
  max-width: 100%;
  height: auto;
}

.current { position: relative;}
.current::before {
  content: "> ";
  position: absolute;
  left: -1rem;
}


@media (min-width: 768px) {
  .card-narrow img {
    max-width: 100%;
    height: auto;    
  }
  .card-wide img {
    clear: left;
    float: left;
    width: 30%;
    margin: 1rem 1rem 1rem 0;
    height: auto;
  }
  .card-wide body {
    clear: left;
    max-width: 70%;
  }
  .hero {
    margin-top: 5rem;
    min-height: 25rem;
  }
  .hero h1 {
    font-size: 5rem;
  } 
  .hero h6 {
    font-size: 1.6rem;
  } 

}