/* var */
:root {
  /* palatte */
  --heading-color: #152523;
  --text-color: #28312a;
  --link-color: #1e7e5c;
  --highlight-color: #2c5541;
  --gray1: #e5e5e5;
  --gray2: #a1a0a0;
  --gray3: #555;
  --code-bg: #f0f0f0;
  /* font */
  --serif-font-family: 
    "Noto Serif", 
    "Noto Serif SC", 
    "Noto Serif TC", 
    "Noto Serif CJK SC", 
    "Noto Serif CJK TC", 
    "Source Han Serif SC", 
    "Source Han Serif TC", 
    "Songti SC", 
    "Times New Roman", 
    Times, 
    serif; 
  --fangsong-font-family: 
    'STFangsong', 
    'FangSong', 
    '仿宋', 
    serif;
  --monospace-font-family: 
    'Menlo', 
    Consolas, 
    'Courier New', 
    monospace;
  --heading-font:
    'STDongGuanTi',
    sans-serif;
  /* length */
  --len-10: 1rem;
  --len-12: 1.2rem;
  --len-15: 1.5rem;
  /* img */
  --bg-image: url("../img/bg-light.png");
}

@media (prefers-color-scheme: dark) {
  :root {
    /* palatte-dark */
    --heading-color: #beddd0;
    --text-color: #b0c1bb;
    --highlight-color: #8ba293;
    --gray1: #3a3a3a;
    --gray2: #777;
    --gray3: #aaa;
    --code-bg: #2a2a2a;
    /* img-dark */
    --bg-image: url("../img/bg-dark.png");
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--serif-font-family);
  font-size: 18px;
  line-height: 1.8;
  color: var(--text-color);
  max-width: 700px;
  margin: 0 auto;
  padding: 0 var(--len-15);
  background: var(--bg-image) no-repeat center fixed;
}

a {
  text-decoration: none;
}

hr {
  margin: 3rem 5rem;
  border: none;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(7, 84, 66, 0.6),
    transparent
  );
}

strong {
  border-bottom: 2px solid var(--highlight-color);
}

/* site-header */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 0;
  border-bottom: 1px solid var(--gray1);
  margin-bottom: 3rem;
}

.site-title {
  font:
    bold var(--len-15) var(--heading-font);
  color: var(--text-color);
}

nav a {
  margin-left: var(--len-15);
  color: var(--text-color);
  font-size: 0.95rem;
}

/* post-list */
.post-list {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.post-card a,
.post-card p {
  color: var(--text-color);
}

.post-card h2 {
  font-size: 1.3rem;
  margin-bottom: 0.25rem;
}

.post-card summary {
  font-family: var(--fangsong-font-family);
  margin-bottom: 0.5rem;
  color: var(--gray3);
}

/* post-content */
.post-header {
  margin-bottom: var(--len-10);
  padding-bottom: var(--len-10);
}
.post-header h1 {
  font-family: var(--heading-font);
  font-size: 2rem;
  color: var(--heading-color);
  margin-bottom: 0.5rem;
  text-align: center;
  margin-top: 3vh;
}
.post-header time {
  font-size: 0.9rem;
  font-family: var(--monospace-font-family);
  color: var(--gray2);
}

.post-content a,
.post-header a {
  color: var(--link-color);
}
.post-content h1, .post-content h2, .post-content h3 {
  font-family: var(--heading-font);
  color: var(--heading-color);
}
.post-content h2 {
  font-size: var(--len-15);
  margin: 2rem 0 var(--len-10);
}
.post-content h3 {
  font-size: var(--len-12);
  margin: var(--len-15) 0 0.75rem;
  text-align: center;
}
.post-content p {
  margin-bottom: var(--len-12);
}
.post-content ul,
.post-content ol {
  padding-left: 2.5rem;
  margin-bottom: var(--len-12);
}
.post-content li {
  margin-bottom: 0.25rem;
}
.post-content del {
  text-decoration: none;
  filter: blur(5px) grayscale(80%) opacity(40%);
  transition: filter 0.2s ease;
}
.post-content del:hover {
  filter: none;
}
.post-content blockquote {
  color: var(--gray3);
  font-family: var(--fangsong-font-family);
  margin-bottom: var(--len-15);
  padding-left: var(--len-12);
  border-left: 1px dashed var(--gray2);
}

.post-content code, .post-content pre span, .post-content pre code {
  font-family: var(--monospace-font-family);
  font-size: 0.9rem;
}
.post-content code {
  background: var(--code-bg);
  padding: 0.2em 0.4em;
  border-radius: 3px;
  margin: 0.2em 0.4em;
}
.post-content pre {
  filter: saturate(0.8);
  padding: var(--len-10);
  border-radius: 6px;
  overflow-x: auto;
  margin-bottom: var(--len-12);
}
.post-content pre code {
  background: none;
  padding: 0;
}

/* footer */
footer {
  text-align: center;
  padding: 3rem 0 2rem;
  color: var(--gray2);
  font-size: 0.85rem;
  margin-top: 4rem;
}
footer a {
  color: var(--gray2);
}

/* @media */
@media (max-width: 600px) {
  body {
    font-size: 16px;
  }
  .site-header {
    flex-direction: column;
    gap: var(--len-15);
    text-align: center;
  }
  nav a:first-child {
    margin-left: 0;
  }
  .post-card:nth-child(even) {
    position: relative;
    align-self: flex-end;
  }
  .post-card:nth-child(even) h2, .post-card:nth-child(even) summary {
    text-align: right;
  }
  .post-header h1 {
    font-size: var(--len-15);
  }
  .post-content h2 {
    font-size: var(--len-12);
  }
  .post-content h3 {
    font-size: var(--len-10);
  }
  .post-content blockquote {
    padding-left: 0.5rem;
  }
  .post-content code, .post-content pre, .post-content pre code {
    font-size: 14px;
  }
  .post-content pre {
    padding: 0.5rem;
    margin-bottom: var(--len-10);
  }
}

@media (max-width: 768px) {
  .post-content del {
    text-decoration: line-through;
    color: var(--gray3);
    filter: none;
    transition: none;
  }
}