:root {
  --color-bg: #0b0b0f;
  --color-bg-secondary: #16161d;

  --color-text: #e6e6eb;
  --color-text-secondary: #9a9aa3;

  --color-accent: #7c5cff;
  --color-accent-rgb: 124, 92, 255;
  --color-tag-bg: rgba(255, 255, 255, 0.05);
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: "Inter", sans-serif;
  margin: 0;
}

h1 {
  font-size: 2.5rem;
  font-weight: 600;
}

h2 {
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

h3 {
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

p {
  font-size: 1rem;
  margin-bottom: 1rem;
}

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

time {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

section {
  background-color: var(--color-bg-secondary);
  padding: 1.5rem;
  border-radius: 6px;
  margin-bottom: 2rem;
}

section:not(.hero):hover {
  background-color: #1c1c26;
}

section,
article {
  transition: background-color 0.2s ease, transform 0.2s ease;
}

article {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--color-bg);
}

article:hover {
  transform: translateY(-2px);
}