@import url('https://fonts.googleapis.com/css2?family=Linden+Hill:ital@0;1&display=swap');

/* Light mode (default) */
:root {
  --bg-color: #faf8f7;
  --text-color: #2a1a12;
  --text-muted: #888;
  --text-darker: #444;
  --link-color: #3d251a;
  --link-hover-color: #5d3e2a;
  --border-color: #3d251a;
  --tag-bg: #e0c6ba;
  --tag-text: #3d251a;
  --tag-hover-bg: #3d251a;
  --tag-hover-text: #e0c6ba;
  --svg-fill: #e0c6ba;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1612;
    --text-color: #e8e0dc;
    --text-muted: #a39086;
    --text-darker: #d0c8c4;
    --link-color: #fcece3;
    --link-hover-color: #f0d6ca;
    --border-color: #e0c6ba;
    --tag-bg: #3d251a;
    --tag-text: #e0c6ba;
    --tag-hover-bg: #e0c6ba;
    --tag-hover-text: #3d251a;
    --svg-fill: #fadcc5;
  }
}

body {
  font-family: "Linden Hill", serif;
  font-size: 1.4rem;
  line-height: 1.5;
  padding-top: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.heading {
  display: flex;
  max-width: 300px;
  justify-content: center;
  border-bottom-style: double;
  border-top-style: double;
  border-color: var(--border-color);
  margin: auto;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: 10em;
  padding-right: 10em;
  color: var(--link-color);
}

.content-wrapper {
  display: flex;
  flex-wrap: wrap;
}

a {
  text-decoration: none;
  color: var(--link-color);
}

a:hover {
  color: var(--link-hover-color);
  transition: color 0.2s ease;
}

main {
  flex-basis: 70%;
  flex: 3;
  padding: 4rem 2rem;
  min-width: 360px;
  max-width: 900px;
}

aside {
  flex-basis: 30%;
  flex: 1;
  padding: 4rem 2rem;
  font-size: 1.2rem;
  color: var(--text-darker);
  min-width: 300px;
  max-width: 300px;
}

h1, h2, h3, h4, h5, h6 {
  margin-block: 0;
}

.tags > a {
  display: inline-block;
  background-color: var(--tag-bg);
  color: var(--tag-text);
  text-decoration: none;
  padding: 0.2rem 0.5rem;
  margin: 0.1rem;
  border-radius: 0.3rem;
  font-size: 1rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.tags > a:hover {
  background-color: var(--tag-hover-bg);
  color: var(--tag-hover-text);
}

.site-description {
  font-size: 1.2rem;
  font-style: italic;
  text-wrap: balance;
  line-height: 1;
}

aside nav {
  margin-block-start: 0.5rem;
  font-size: 1.3rem;
}

.pagination {
  display: flex;
  justify-content: space-between
}

.post-list {
  margin-block: 2rem;
}

.homepage.post-list {
  margin-block-start: 0.5rem;
}

.post {
  margin-block-end: 2rem;
}

.post-excerpt {
  font-size: 1.5rem;
  margin-block: 1rem;
}

.post-content {
  margin-block: 2rem;
}

.post-metadata {
  font-size: 1.2rem;
  color: var(--text-muted);
  font-weight: normal;
}

.post-list .post-metadata {
  font-size: 1rem;
}

.post-meta2 {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.svg-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  fill: var(--svg-fill);
  padding-right: 5px;
  vertical-align: text-top
}