:root {
  /* Palet warna e-reader */
  --ereader-default: #F5F5F5;
  /* abu-abu terang */
  --ereader-warm: #FAF3E0;
  /* krem lembut */
  --ereader-neutral: #F2F2F2;
  /* abu-abu netral */
  --ereader-sepia: #FFF8DC;
  /* cornsilk klasik */
  --ereader-dark: #000000;
  /* hitam pekat */
  --ereader-soft-dark: #121212;
  /* hitam keabu-abuan */

  /* Font */
  --ereader-font-serif: "Georgia", "Bookerly", serif;
  --ereader-font-sans: "Helvetica", "Verdana", sans-serif;
  --ereader-font-accessible: "OpenDyslexic", sans-serif;
}


.andika-regular {
  font-family: "Andika", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.2rem;
  line-height: 1.8;
}

.andika-bold {
  font-family: "Andika", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.andika-regular-italic {
  font-family: "Andika", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.andika-bold-italic {
  font-family: "Andika", sans-serif;
  font-weight: 700;
  font-style: italic;
}

body {
  background-color: var(--ereader-warm);
  /* default abu-abu terang */
  font-family: var(--ereader-font-sans);
  /* nuansa buku */
  line-height: 1.5;
  /* spasi antar baris nyaman */
  margin: 1.2rem auto;
  max-width: 1025px;
  /* lebar kolom mirip buku */
  padding: 0.5rem;
}

/* Mode hangat */
body.warm {
  background-color: var(--ereader-warm);
}

/* Mode sepia */
body.sepia {
  background-color: var(--ereader-sepia);
  color: #2E2E2E;
  /* teks lebih lembut */
}

/* Dark mode */
body.dark {
  background-color: var(--ereader-dark);
  color: #FFFFFF;
}

/* Soft dark mode */
body.soft-dark {
  background-color: var(--ereader-soft-dark);
  color: #FFFFFF;
}

.site-name {
  font-size: 1.5rem;
  color: #333;
}

.toc-head {
  font-size: 1.4rem;
  color: #333;
  margin-bottom: 0.5rem;
}

.toc-list {
  /* font-size: 1.2rem; */
  color: #333;
  margin-bottom: 0.5rem;
}


.box-img {
  /* margin: 1rem 0; */
  border: 1px solid #ccc;
  padding: 0.5rem;
  border-radius: 4px;
}

.box-code {
  background-color: var(--ereader-soft-dark);
  color: #FFFFFF;
  border: 1px solid #ccc;
  padding: 1rem;
  border-radius: 4px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.95rem;
  overflow-x: auto;
  overflow-wrap: break-word;
}

/* .blog-title span {
  font-size: 1.5rem;
  color: #333;
} */