/* =============================================
   Dark page theme foundation
   Design tokens + base body treatment shared by
   about, service, and archive. Not loaded by index.
   ============================================= */

:root {
  --primary-color: hsl(0, 0%, 58%);
  --secondary-color: hsl(170, 44%, 69%);
  --background-color: hsl(0, 0%, 7%);
  --text-color: hsl(0, 0%, 88%);
  --text-muted-color: hsl(240, 5%, 65%);
  --text-year: hsla(0, 0%, 96%, 0.799);
  --text-darker-muted-color: hsl(240, 4%, 46%);
  --icon-color: hsl(240, 5%, 65%);
  --icon-active-color: hsl(240, 5%, 84%);
  --container-bg-alpha: hsla(240, 4%, 16%, 0.8);
  --container-bg-alpha-medium: hsla(240, 4%, 16%, 0.01);
  --container-bg-alpha-light: hsla(240, 5%, 26%, 0.5);
  --hover-bg-alpha: hsla(0, 0%, 100%, 0.03);
  --hover-bg-icon-alpha: hsla(0, 0%, 100%, 0.1);
  --border-color-alpha: hsla(0, 0%, 100%, 0.05);
  --border-radius-default: 8px;
  --border-radius-round: 50%;
  --border-radius-pill: 9999px;
}

html {
  scrollbar-gutter: stable;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  scrollbar-gutter: stable;
}

#main-content {
  flex-grow: 1;
  padding: 2rem 1.5rem;
}

@media (max-width: 760px) {
  #main-content {
    padding: 2rem 3rem;
  }
}

@media (min-width: 1024px) {
  #main-content {
    padding: 2rem 6rem;
  }
}