/* https://codepen.io/pouretrebelle/pen/kxWemn */
/* with edits */

:root {
    --bg: #EAEBE1;
    --lines: #d5c999; 
}

body {
  background-image: url(pineforest.jpg);
  background-attachment: fixed;
  background-size: cover;
}

article, footer {
  position: relative;
  background-color: var(--bg);
  background-size: 1px 28px;
  line-height: 28px;
  vertical-align: 2px;
  background-clip: border-box;
  background-image: repeating-linear-gradient(transparent, transparent 27px, var(--lines) 27px, var(--lines) 100%);
  background-position: 0 6px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

  article:before, article:after {
    content: '';
    position: absolute;
    top: 0
}
  article:after {
    margin-left: -10px;
    width: 0;
    height: 100%;
    border-left: 3px double var(--lines);
}
  article:before {
    width: 100%;
    height: 6px;
    left: 0;
    background-color: var(--bg);
  }

p, ul, ol {
  margin-top: 28px;
  margin-bottom: 28px;
  font-size: 15px;
  font-family: 'Mako', serif;
  text-align: justify
}

h1,h2,h3,h4, footer nav {
    font-family: 'Gentium Book Plus', serif;
}

h2, h3 {
    margin-top: 0;
    margin-bottom: 0;
}

h3 {
  font-weight: 300;
  text-align: left;
  text-decoration: none;
  font-size: 23px;
  letter-spacing: 1px;
}

ul {
    margin-bottom: 28px;
}

  body {
  background-color: #f5f5f5
}

a {
  color: crimson;
}

.tags a {
  color:darkslategrey;
}

footer {
  text-align: center;
  font-family: monospace;
  padding: 1em;
  background-image: none;

}

footer nav {
  font-size: 1.5em;
}

.tags p, .tags h3 {
  display: inline;
}

time, article .hashtag { 
  font-family: 'Cedarville Cursive', handwriting;
}

/* gentium-book-plus-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: 'Gentium Book Plus';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/gentium-book-plus-v1-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* mako-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: 'Mako';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/mako-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* cedarville-cursive-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: 'Cedarville Cursive';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/cedarville-cursive-v17-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}