@font-face {
  font-family: "Aileron";
  font-display: swap;
  src:
    local("Aileron Bold"),
    local("Aileron-Bold"),
    url("fonts/aileron.bold.otf");
  font-weight: 700;
}
@font-face {
  font-family: "Aileron";
  font-display: swap;
  src:
    local("Aileron Medium"),
    local("Aileron-Medium"),
    url("fonts/aileron.semibold.otf");
  font-weight: 600 500;
}
@font-face {
  font-family: "Aileron";
  font-display: swap;
  src:
    local("Aileron"),
    local("Aileron-Regular"),
    url("fonts/aileron.regular.otf");
}
@font-face {
  font-family: "Aileron";
  font-display: swap;
  src:
    local("Aileron Light"),
    local("Aileron-Light"),
    url("fonts/aileron.light.otf");
  font-weight: 300;
}
@font-face {
  font-family: "QT Garomand";
  font-display: swap;
  src:
    local("QT Garomand"),
    local("QT Garomand-Regular"),
    local("QTGaromand-Regular"),
    url("fonts/QTGaromand.otf");
}
@font-face {
  font-family: "QT Garomand";
  font-display: swap;
  src:
    local("QT Garomand Bold"),
    local("QT Garomand-Bold"),
    local("QTGaromand-Bold"),
    url("fonts/QTGaromand-Bold.otf");
  font-weight: bold;
}
@font-face {
  font-family: "QT Garomand";
  font-display: fallback;
  src:
    local("QT Garomand Italic"),
    local("QT Garomand-Italic"),
    local("QTGaromand-Italic"),
    url("fonts/QTGaromand-Italic.otf");
  font-style: italic;
}
@font-face {
  font-family: "QT Garomand";
  font-display: fallback;
  src:
    local("QT Garomand Bold Italic"),
    local("QT Garomand-BoldItalic"),
    local("QTGaromand-BoldItalic"),
    url("fonts/QTGaromand-BoldItalic.otf");
  font-weight: bold;
  font-style: italic;
}

:root {
  --area-border-color: #cecece;
  --content-background: #f2eeeb;
  --color-base-copy: black;
  --display-face: Aileron, "Fira Sans", "Avenir Next", Roboto, Arial, sans-serif;
  --highlight-color: #080880;
  --link-color: black;
  --title-color: #060660;
  --subhed-color: #1010b0;
}

/** theme overrides **/
h1, h2, h3, h4, h5, h6 { color: unset; }
.content a, .warning a, .authorbox__description a {
  font-weight: 600;
  color: var(--highlight-color);
}
.content a:hover, .warning a:hover, .authorbox__description a:hover, .toc__menu a:hover {
  color: var(--color-base-copy);
}

body {
  font-size: 1rem;
  font-family: Garamond, "QT Garomand", "Noto Serif", "Times New Roman", serif;
  color: var(--color-base-copy);
  background: url('img/parchmentg.jpg') #eee;
}

a { color: var(--highlight-color); }
a:hover { color: var(--color-base-copy); text-decoration: underline; }

.divider {
  height: 3px;
  background: var(--highlight-color);
}
.warning {
  border-color: var(--area-border-color);
}

.header {
  background: none;
}
.header__container {
  background-color: #d6d2cf;
  background-position: top right;
  background-size: cover;
  background-image: url("./img/cc2_banksy_folkestone.jpg");
}

main.main {
  background: var(--content-background);
}
main.list {
  padding: 0 1em;
}
h1, h2, .header__container, .main__title, .widget__title, .widget__categories {
  font-family: var(--display-face);
}
.logo__text, .widget__title {
  text-transform: lowercase;
  letter-spacing: -0.4px;
}
article.list__item.post {
  display: flex;
}
.list__thumbnail {
  float: none;
  flex: 0 0 auto;
}
.list__thumbnail img {
  max-height: 300px;
  max-width: 200px;
}
.logo__tagline, .list__title, .post__title {
  font-weight: 600;
}
.logo__img {
  border-radius: 64px;
}
.logo__title {
  font-size: 2.5rem;
  color: var(--title-color);
  text-shadow: 2px 2px 3px #d6d2cf;
}
.logo__tagline {
  font-size: 1rem;
  color: var(--subhed-color);
  text-shadow: 1px -2px 2px #d6d2cf;
}
.wrapper {
  padding: 0 1em 1em 1em;
  background: none;
}
.pagination {
  margin: 1em;
}
.primary { padding: 0.3em 0; }
.sidebar {
  -webkit-flex: unset;
  flex: unset;
  padding: 0 1em;
}
.content ul ul, .content ol ol, .content ol ul, .content ul ol {
  margin-bottom: 1.2rem;
}

.meta, .meta a { color: #111; }

.toc {
  width: 70%;
  font-size: 85%;
}
.toc__title {
  font-weight: 500;
  text-transform: none;
}
.toc__menu {
  font-weight: 400;
}
.toc__menu a {
  color: var(--highlight-color);
}

.related-post-box {
  margin-top: 2rem;
}
.related-post-box header {
  font-family: var(--display-face);
  font-weight: 500;
}
.related-post-box ul {
  margin-left: 12px;
}
.related-post-box figure {
  display: inline-block;
  max-width: 48px;
  max-height: 48px;
  float: none;
  margin: 4px;
  vertical-align: middle;
  overflow: hidden;
}
.related-post-box li.no-thumb {
  margin: 8px 0;
}
.related-post-date {
  margin-left: 3px;
}
.extra-related { font-weight: 300; }

@media screen and (min-width: 800px) {
  .wrapper {
    padding: 1em 0;
    background: none;
  }
  main.list {
    padding: 0 2em 0 0;
  }
  figure.float-left {
    float: left;
    clear: left;
    margin-right: 2em;
  }
  figure.float-right {
    float: right;
    clear: right;
    margin-left: 2em;
  }
  .pagination {
    margin-left: 0;
  }
  .sidebar {
    padding: 0 0 0 5%;
  }
}
figure.center {
  clear: both;
  text-align: center;
}
figure.inline {
  display: inline-block;
}

pre, code {
  font-size: 0.9rem;
  color: var(--color-base-copy);
  border-color: var(--area-border-color);
}

.widget { font-family: var(--display-face); font-size: 0.9rem; margin-bottom: 4em; }
.widget__content { color: #7c7d9c; }
.widget__item { border-bottom: 1px dotted var(--highlight-color); }
.widget__title { color: var(--highlight-color); font-weight: normal; border-bottom: 2px solid var(--highlight-color); }

.widget-search__form { padding: 0; }
.widget-search__field {
  color: var(--color-base-copy);
  background: var(--content-background);
}
.widget-search__field:focus { outline-color: var(--highlight-color); }

#lastfm-quip {
  margin: -0.25rem 0 0.5rem 0;
  font-size: 90%;
}

.widget-top-artists {
  margin-left: -1em;
  padding-left: 1em;
}
#widget-artists { min-height: 150px; }
#widget-artists ul {
  margin: 0 0 0.5em -1em;
  columns: 2;
  list-style: none;
}
#widget-artists li {
  position: relative;
  padding-left: 1em;
  text-transform: lowercase;
}
#widget-artists li a { color: inherit !important; }
#widget-artists li.showgirl::before {
  display: block;
  position: absolute;
  left: 0;
  content: '💋';
  font-size: 70%;
}
#widget-artists li.heart::after {
  font-size: 90%;
  margin-left: 0.5em;
  content: '♥︎';
  color: #d45c9e;
}
#lastfm-fave, #widget-songstack { text-transform: lowercase; }
#lastfm-fave { min-height: 44px; }
#lastfm-fave div p, #widget-songstack div p {
  margin: 0;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#lastfm-fave div p:first-child,
#widget-songstack div p:first-child {
  font-weight: 500;
}
#fave-track-cover > img,
#lastfm-fave > img {
  display: inline-block;
  height: 3.5rem;
  width: 3.5rem;
  margin-right: 6px;
  object-fit: cover;
  object-position: center;
  border-radius: 1.75rem;
}
#fave-track-cover > div,
#lastfm-fave > div {
  display: inline-block;
}

#brainzgrid { min-height: 295px; }
#brainzgrid svg > rect { fill-opacity: 0; }

.widget-book .widget__content { line-height: 1.3; }
.widget-book .widget__content h3 { margin-bottom: 1rem; }
.widget-book .widget__content > h4 {
  margin-top: -0.9rem;
  margin-bottom: 1rem;
  font-size: 90%;
}
section.bookwyrm-book {
  display: flex;
  margin-top: 0.5rem;
  overflow: hidden;
}
.widget-book-reading section.bookwyrm-book { margin-top: -0.75rem; }
section.bookwyrm-book:first-child { margin-top: 0; }
section.bookwyrm-book:nth-child(even) {
  flex-direction: row-reverse;
  text-align: right;
}
section.bookwyrm-book aside { margin: 0 0.5rem; }
section.bookwyrm-book aside h3 {
  margin-bottom: 2px;
  font-size: 0.9rem;
  font-weight: 400;
}
section.bookwyrm-book aside h4 {
  margin-bottom: 2px;
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: -0.2px;
}
section.bookwyrm-book aside p {
  margin: 0 2px 0 0;
  font-size: 0.7rem;
  font-weight: 300;
}
section.bookwyrm-book img {
  display: block;
  width: 3.5rem;
  height: 4.5rem;
  object-fit: contain;
  object-position: center;
  flex: 0 0 auto;
}
#wyrm-reading aside h3 {
  max-width: 203px;
}

#girls-kick-ass {
  display: flex;
  position: relative;
  height: 245px;
  margin: -10px 0 2.5em 0;
  padding: 1.5rem 1.5rem 0 180px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  background: url("img/the-girl.svg") top left no-repeat;
  opacity: 0.8;
}
#girls-kick-ass p {
  margin-bottom: 1em;
  font-size: 80%;
  font-weight: 300;
}
#girl-in-the-mirror p {
  display: inline-block;
  font-size: 90%;
  opacity: 0.2;
  transform: scaleX(-1);
}
#girl-in-the-mirror p a {
  text-decoration: none;
  color: inherit;
  cursor: text;
}

.widget-categories .widget__item:first-child { padding-top: 5px; /* from theme */ }
.widget-categories ul { columns: 2; margin-top: -10px; }

.widget-taglist__link, .tags__link {
  font-family: var(--display-face);
  text-transform: lowercase;
  font-weight: 300;
  background: #61217b;
  border-radius: 3px;
}
.widget-taglist__link.med { font-weight: 400; }
.widget-taglist__link.high { font-weight: 500; letter-spacing: 0.25px; }

@media screen and (prefers-color-scheme: dark) {
  :root {
    --area-border-color: #3d3da9;
    --color-base-copy: #eae7e0;
    --content-background: #14141a;
    --highlight-color: #babaf0;
    --link-color: var(--highlight-color);
  }
  body { background: url('img/parchmentb.jpg') #121212; }
  .header__container { opacity: 0.75; }
  .primary { font-family: var(--display-face); }
  .meta, .meta a { color: var(--color-base-copy); }
  .meta a:hover { color: var(--highlight-color); }
  .widget__content { color: #b3ad80; }
  .pagination__item {
    color: var(--highlight-color);
    background: var(--area-border-color);
  }
  .pagination__item:hover, .pagination__item--current {
    color: var(--color-base-copy);
    background: #413e9d;
  }
  pre, code, .toc {
    background: #020236;
  }
}