:root {
  --gap: 24px;
  --content-gap: 20px;
  --nav-width: 100vw;
  --main-width: 720px;
  --header-height: 60px;
  --footer-height: 60px;
  --radius: 8px;
  --theme: rgb(255, 255, 255);
  --entry: rgb(255, 255, 255);
  --primary: rgb(30, 30, 30);
  --secondary: rgb(108, 108, 108);
  --tertiary: rgb(214, 214, 214);
  --content: rgb(31, 31, 31);
  --code-font-color: rgb(34, 197, 94);
  --code-block-bg: rgb(28, 29, 33);
  --code-bg: rgb(245, 245, 245);
  --border: rgb(238, 238, 238);
  --accent-color: rgb(185 28 28);
  color-scheme: light;
}

:root[data-theme=dark] {
  --theme: rgb(15 23 42);
  --entry: rgb(35, 53, 99);
  --primary: rgb(218, 218, 219);
  --secondary: rgb(155, 156, 157);
  --tertiary: rgb(65, 66, 68);
  --content: rgb(196, 196, 197);
  --code-block-bg: rgb(46, 46, 51);
  --code-bg: rgb(55, 56, 62);
  --border: rgb(51, 51, 51);
  color-scheme: dark;
}

.logo .label-prefix,
.logo .label-suffix {
  color: var(--accent-color);
}

.label-prefix {
  margin-right: 4px;
}

.feather {
  width: 24px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vertical-align: middle;
}
#menu .feather {
  display: inline-block;
}

.list {
  background: var(--code-bg);
}
[data-theme=dark] .list {
  background: var(--theme);
}

.first-entry .entry-content {
  color: var(--code-font-color);
  padding: 1rem;
  background-color: rgb(0, 0, 0);
  border-width: 1px;
  border-radius: 0.25rem;
}
.first-entry .entry-header h1::before {
  content: "> ";
  color: var(--label-accent-color);
}

.profile-subtitle {
  color: var(--code-font-color);
  padding: 1rem;
  background-color: rgb(0, 0, 0);
  border-width: 1px;
  border-radius: 0.25rem;
}

.timeline {
  padding-left: 20px;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--secondary);
  z-index: -1;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 5px;
  width: 8px;
  height: 8px;
  background-color: var(--secondary);
  border-radius: 50%;
}

.timeline-item.current::before {
  background-color: var(--accent-color);
  width: 10px;
  height: 10px;
  top: 4px;
}

.resume-section {
  margin-bottom: 3rem;
}

.section-header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.8rem;
  margin: 32px auto 24px;
  font-size: 32px;
}

.post-content ul {
  list-style-type: disc;
}

::marker {
  color: var(--accent-color);
}

.bg-accent-color {
  background-color: var(--accent-color);
}

.text-accent-color {
  color: var(--accent-color);
}