html, body {
  background-color: #FEFEFA;
}

body a {
  color: rgb(71, 89, 153);
}

body a:hover {
  color: #5D6EA8; }

small {
  font-size: 24px;
}

h1 small {
  font-size: 16px;
  font-style: italic;
  display: block;
  font-size: 12px;
  color: #444;
}
p {
  margin-bottom: 1.8em;
}


.rss img {
  height: 14px;
}

figure {
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

blockquote {
  position: relative;
  font-style: italic;
}

blockquote:before {
    content: '\201C';
    position: absolute;
    top: -.5em;
    left: -0.5em;
    color: #77F;
    font-size: 6em;
    z-index: -1;
 }

.container {
   max-width: 800px;
 } 

article img {
  max-width: 800px;
  border-radius: 1.5rem;
}

.footer {
  padding-top: 30px;
  padding-bottom: 30px;
}

.header {
  padding-top: 30px;
  padding-bottom: 10px;
}

.header .nav a.selected {
  text-decoration: underline;
}

h1 small {
  font-size: 16px;
  
}

.hero {
  background-position: top;
  background-repeat: no-repeat;
  background-size: 100% auto, contain;
  background-image: url("/assets/images/hero.png");
}

.header .nav {
  text-align: right;
}

.logo, header a.logo {
  font-weight: 600;
  color: rgb(229, 144, 67);
}

.header a:hover {
  color: inherit;
  text-decoration: underline;
}

.header {
  font-size: 20px;
  font-weight: 400;
}

.header a {
  text-decoration: none;
  font-weight: 400;
}

a.logo {
  text-decoration: none;
}

.nav a {
  text-decoration: none;
}

.header a:hover {
  text-decoration: underline;
}

.header .i-about {
  color: inherit;
}

h1 {
  margin-top: 2em;
}

html body, html article {
  font-family: "Baskervville", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px; /* Base font size */
  line-height: 1.6; /* 18px * 1.6 = 28.8px */
  color: #222;
}

.header a[href="/{{ category }}/"] {
  text-decoration: underline;
  color: #111;
  font-size: 1em;
}

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 3.0rem; color: #111;}
  h2 { font-size: 2.6rem; color: #111;}
  h3 { font-size: 2.2rem; color: #111;}
  h4 { font-size: 2.0rem; color: #111;}
  h5 { font-size: 1.6rem; color: #111;}
  h6 { font-size: 1.2rem; color: #111;}
}