@font-face {
  font-family: "EB Garamond 12";
  font-style: normal;
  font-weight: 400 800;
  src: url("/fonts/EBG12-Roman.woff2") format("woff2");
}

@font-face {
  font-family: "EB Garamond 12";
  font-style: italic;
  font-weight: 400 800;
  src: url("/fonts/EBG12-Italic.woff2") format("woff2");
}

@font-face {
  font-family: "URW Gothic";
  font-style: normal;
  font-weight: normal;
  src: url("/fonts/URWG-RegularRoman.woff2") format("woff2");
}

@font-face {
  font-family: "URW Gothic";
  font-style: oblique;
  font-weight: normal;
  src: url("/fonts/URWG-RegularOblique.woff2") format("woff2");
}

@font-face {
  font-family: "URW Gothic";
  font-style: oblique;
  font-weight: bold;
  src: url("/fonts/URWG-BoldRoman.woff2") format("woff2");
}

@font-face {
  font-family: "URW Gothic";
  font-style: oblique;
  font-weight: bold;
  src: url("/fonts/URWG-BoldOblique.woff2") format("woff2");
}

:root {
  --Color-Black: #000000;
  --Color-Papyrus: #f6f4eb;
  --Color-Purple-Black: #1e1247;
  --Color-Purple-Dim: #3c334f;
  --Color-Purple-Dark: #52485a;
  --Color-Purple-Mid: #4f3c80;
  --Color-Purple-Light: #8e7ccd;
  --Color-Purple-Bright: #e0d9e9;
}

html {
  background: var(--Color-Purple-Dark);
  color: var(--Color-Black);
  font-family:
    "EB Garamond 12",
    Charis,
    "Charis SIL",
    Charter,
    "Bitstream Charter",
    "Palatino Linotype",
    "URW Palladio L",
    P052,
    Georgia,
    "STIX Two Math",
    Serif;
  display: flex;
  justify-content: center;
  /* 
  Force the scroll wheel to be present so that pages without scrolling 
  content aren't centered differently
  */
  overflow-y: scroll;
}

body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--Color-Papyrus);
  width: 45rem;
  max-width: 100%;
}

header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: auto;
}

figure {
  display: flex;
  flex-direction: column;
  align-items: center;
}

figure figcaption {
  margin-top: 0.25rem;
  font-size: 0.8rem;
}

img {
  max-width: 100%;
}

.quick-links {
  display: flex;
  justify-content: space-around;
  margin-top: 0.35rem;
  text-align: center;
  font-style: italic;
  font-family: Georgia, Serif;
  flex: 1;
}

header a.logo {
  display: flex;
  justify-content: center;
}

.quick-links a {
  padding: 0.3rem 0.6rem 0.3rem 0.6rem;
}

.quick-links a:any-link {
  text-decoration: none;
  color: inherit;
}

article {
  margin-top: 0.5rem;
  margin-bottom: 1.8rem;
}

.blog-content {
  padding-left: 4.5rem;
  padding-right: 4.5rem;
}

.title-and-dates {
  padding-left: 4.5rem;
}

.title {
  display: flex;
  justify-content: left;
  align-items: start;
}

.title h2 {
  margin-bottom: 0;
}

.editdate {
  font-style: italic;
}

.links-to-posts-container {
  display: flex;
  justify-content: center;
}

.links-to-posts {
  display: flex;
  justify-content: space-evenly;
  margin-top: 1.25rem;
  width: 50%;
}

.post-link {
  flex: 1
}

.post-link-icon-container {
  display: flex;
  justify-content: center;
}

.post-link-icon-container svg {
  width: 25px;
  height: 25px;
}

.post-link-caption {
  text-align: center;
  text-decoration: none;
}

.post-link a:any-link {
  text-decoration: none;
  color: inherit;
}
