/*
  Override CSS from the Hyde theme this site is based on.

  Colors:
    * Blue-purple color: #4b60de
    * Magenta-purple color (in sidebar border): #9900cc

  Fonts:
    * 'Quattrocento Sans', sans-serif;
    * 'Alegreya', serif;

    (would be nice to maybe move this to using var(--...), once there is more compatibility:
    https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
*/

:root {
  --font-color: #313131;
  --sans-serif-font: 'Quattrocento Sans', sans-serif;
  --blue-purple: #4b60de;
}

html {
  font-family: var(--sans-serif-font);
  font-size: 22px;
  font-weight: 400;
  color: var(--font-color);
}

body {
  color: var(--font-color);
}

@media (min-width: 48em) {
  html {
    font-size: 22px;
  }
  @media (min-width: 48em) {
    .content {
      max-width: 48rem;
      margin-left: 20rem;
      margin-right: 2rem;
    }

    .layout-reverse .content {
      margin-right: 19rem;
    }
  }
}

@media (min-width: 58em) {
  html {
    font-size: 22px;
  }
}

@media (min-width: 38em) {
  html {
    font-size: 22px;
  }
}

a {
  color: var(--blue-purple);
}

blockquote {
  color: var(--font-color);
  border-left: .25rem solid #e5e5e5;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

h1.p-name {
  margin-top: 0;
}

.sidebar {
  text-align: left;
  font-size: 0.9em;
  font-weight: 400;
  background-color: #ffffff;
  border-width: 0 0 0.1em 0;
  border-style: solid;
  border-color: #9900cc;
}

.sidebar h1 {
  font-size: 1rem;
  font-weight: 700;
}

@media (min-width: 48em) {
  .sidebar {
    background-color: #ffffff;
    color: var(--font-color);
    border-width: 0 0 0 0.1em;
    border-style: solid;
    background-image: none;
    border-image:
      linear-gradient(
          to bottom,
          #ffffff,
          #DBDFF8,
          #9900cc
        ) 1 100%;
    width: 15rem;
  }
}

.sidebar a {
  color: var(--font-color);
}

.book {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.book-image {
  flex-shrink: 5;
  flex-basis: auto;
  margin-right: 1rem;
}

.book-image img {
  max-height: 350px;
}

.book-data {
  margin: 0 0 1rem ;
  flex-basis: auto;
}

a:hover.rating {
  text-decoration: none;
}

.post {
  margin-bottom: 0;
}

.archive ul {
  list-style: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

.archive li {
  margin: 0 0 0.4rem 0;
}

#webmentions img { max-height: 1.2rem; margin-right: -1rem; }

#webmentions li { list-style: none; }

.support-webmentions a {
  color: var(--blue-purple);
}

/* For permalink from timestamp */
.dt-published .u-url {
  color: var(--font-color);
}