:root {
  color-scheme: dark;
  --color-background: #0e0719;
  --color-surface: #211b27;
  --color-secondary: #493f52;
  --color-secondary-hover: #5a4e64;
  --color-accent: #ff484d;
  --color-accent-hover: #ed373f;
  --color-text: #ffffff;
  --color-muted: #b6afbe;
  --color-border: #342c3b;
  --content-width: 1340px;
  --page-gutter: 20px;
  --section-gap: 36px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
}

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

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  min-block-size: 100vh;
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
}

.content-width {
  inline-size: min(var(--content-width), calc(100% - var(--page-gutter) - var(--page-gutter)));
  margin-inline: auto;
}

.page-content {
  flex: 1;
  margin-block-end: var(--section-gap);
}

button,
input,
select,
textarea {
  font: inherit;
}

img,
video {
  max-inline-size: 100%;
  block-size: auto;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@media (max-width: 600px) {
  :root {
    --page-gutter: 12px;
    --section-gap: 24px;
  }
}