:root {
  --body-color: #515151;
  --body-background-color: white;
  --headings-color: #313131;
  --blockquote-color: #7a7a7a;
  --link-color: #0075da;
  --strong-color: #303030;
  --footer-color: #717171;
  --first-name-color: black;
  --last-name-color: #717171;
  --navbar-background-color: #f8f8f8;
  --navbar-font-color: #717171;
  --navbar-hover-color: white;
  --post-title-color: #313131;
  --post-date-color: #757575;
  --post-meta-color: #757575;
  --pre-background-color: #f9f2f4;
  --pre-inline-color: darkgreen;
  --btn-background-color: #fff;
  --btn-border-color: #ccc;
  --btn-font-color: #333;
  --btn-hover-background-color: #e6e6e6;
  --btn-hover-border-color: #adadad;
  --btn-hover-font-color: #333;
  --btn-active-background-color: #d4d4d4;
  --code-block-background-color: white;
  --code-block-color: black;
  --code-block-border-color: #ccc;
  --table-border-color: #e5e5e5;
  --table-stripe-color: #f9f9f9;
  --rule-color: #c3c3c3;
  --rule-ornament-color: #c3c3c3;
  --rule-dots-color: rgba(0, 0, 0, 0.26);
  --rule-hairline-color: rgba(0, 0, 0, 0.12);
  --search-backdrop-color: rgba(0, 0, 0, 0.2);
  --search-selected-color: rgba(0, 0, 0, 0.045); }
  @media (prefers-color-scheme: dark) {
    :root {
      --body-color: #c8c8c8;
      --body-background-color: #181818;
      --headings-color: rgb(216, 216, 216);
      --blockquote-color: #c4c4c4;
      --link-color: #3aa1ec;
      --strong-color: white;
      --footer-color: var(--headings-color);
      --first-name-color: white;
      --last-name-color: #909090;
      --navbar-background-color: #202020;
      --navbar-font-color: #909090;
      --navbar-hover-color: #303030;
      --post-title-color: var(--headings-color);
      --post-date-color: #909090;
      --post-meta-color: #909090;
      --pre-background-color: #333;
      --pre-inline-color: #ff2e88;
      --btn-background-color: #333;
      --btn-border-color: #444;
      --btn-font-color: var(--body-color);
      --btn-hover-background-color: #444;
      --btn-hover-border-color: #555;
      --btn-hover-font-color: var(--strong-color);
      --btn-active-background-color: #3a3a3a;
      --code-block-background-color: #202020;
      --code-block-color: #d8d8d8;
      --code-block-border-color: #333;
      --table-border-color: #333;
      --table-stripe-color: #202020;
      --rule-color: #6a6a6a;
      --rule-ornament-color: #8c8c8c;
      --rule-dots-color: rgba(255, 255, 255, 0.3);
      --rule-hairline-color: rgba(255, 255, 255, 0.15);
      --search-backdrop-color: rgba(0, 0, 0, 0.55);
      --search-selected-color: rgba(255, 255, 255, 0.06); }
      :root img {
        filter: brightness(0.9) contrast(1.1); } }
  :root .dark-mode {
    --body-color: #c8c8c8;
    --body-background-color: #181818;
    --headings-color: rgb(216, 216, 216);
    --blockquote-color: #c4c4c4;
    --link-color: #3aa1ec;
    --strong-color: white;
    --footer-color: var(--headings-color);
    --first-name-color: white;
    --last-name-color: #909090;
    --navbar-background-color: #202020;
    --navbar-font-color: #909090;
    --navbar-hover-color: #303030;
    --post-title-color: var(--headings-color);
    --post-date-color: #909090;
    --post-meta-color: #909090;
    --pre-background-color: #333;
    --pre-inline-color: #ff2e88;
    --btn-background-color: #333;
    --btn-border-color: #444;
    --btn-font-color: var(--body-color);
    --btn-hover-background-color: #444;
    --btn-hover-border-color: #555;
    --btn-hover-font-color: var(--strong-color);
    --btn-active-background-color: #3a3a3a;
    --code-block-background-color: #202020;
    --code-block-color: #d8d8d8;
    --code-block-border-color: #333;
    --table-border-color: #333;
    --table-stripe-color: #202020;
    --rule-color: #6a6a6a;
    --rule-ornament-color: #8c8c8c;
    --rule-dots-color: rgba(255, 255, 255, 0.3);
    --rule-hairline-color: rgba(255, 255, 255, 0.15);
    --search-backdrop-color: rgba(0, 0, 0, 0.55);
    --search-selected-color: rgba(255, 255, 255, 0.06); }
    :root .dark-mode img {
      filter: brightness(0.9) contrast(1.1); }

@media screen and (max-width: 767px) {
  .container {
    padding-left: 5px;
    padding-right: 5px; } }

.year-section {
  margin-bottom: 1rem; }
  .year-section .year-header {
    font-size: 1.1rem;
    font-family: "Merriweather", serif;
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 0.5rem; }
    @media screen and (max-width: 767px) {
      .year-section .year-header {
        gap: 0.25rem;
        padding-top: 8px;
        padding-bottom: 4px; } }
    .year-section .year-header .year-review-link {
      font-size: 0.7rem;
      font-weight: normal;
      margin-left: 0.25rem; }
      @media screen and (max-width: 767px) {
        .year-section .year-header .year-review-link {
          font-size: 0.65rem;
          margin-left: 0.15rem; } }
      .year-section .year-header .year-review-link a {
        color: var(--link-color);
        text-decoration: none; }
        .year-section .year-header .year-review-link a:hover {
          text-decoration: underline; }
    .year-section .year-header .book-count {
      font-size: 0.85rem;
      font-weight: normal;
      color: #666;
      margin-left: auto; }
      @media screen and (max-width: 767px) {
        .year-section .year-header .book-count {
          font-size: 0.75rem; } }
  .year-section .year-books-wrapper {
    margin-top: 0.5rem;
    margin-left: 1rem;
    border-left: 1px solid var(--rule-hairline-color);
    padding-left: 1rem; }
    @media screen and (max-width: 767px) {
      .year-section .year-books-wrapper {
        margin-left: 0.5rem;
        padding-left: 0.5rem; } }
    .year-section .year-books-wrapper ul {
      list-style: none;
      padding-left: 0; }
      .year-section .year-books-wrapper ul li {
        margin-bottom: 0.5rem; }