:root {
    color-scheme: light dark;
  --AccentColor:AccentColor;
  --Canvas:Canvas;
  --CanvasText:CanvasText;
  --LinkText:LinkText;
  --VisitedText:VisitedText;
  --ActiveText:ActiveText;
  --FocusBorder:FocusBorder;
  --FocusOutline:FocusOutline;
  --Highlight:Highlight;
  --HighlightText:HighlightText;
  --GrayText:GrayText;
  --ButtonText:ButtonText;
  --ButtonFace:ButtonFace;
  --ButtonShadow:ButtonShadow;
  --ButtonHoverFace:ButtonHoverFace;

}


h1 {
  color: var(--AccentColor);
}


p {
  color: var(--CanvasText);
}

a {
  color: var(--LinkText);
}

a:visited {
  color: var(--VisitedText);
}

a:active {
  color: var(--ActiveText);
}

a:focus {
  outline: 1px solid var(--FocusBorder);
  outline-offset: -1px;
}

a:focus {
  outline: 1px solid var(--FocusOutline);
  outline-offset: -1px;
}

mark {
  background-color: var(--Highlight);
  color: var(--HighlightText);
}

small {
  color: var(--GrayText);
}

button {
  color: var(--ButtonText);
  background-color: var(--ButtonFace);
}

button:hover {
  background-color: var(--ButtonHoverFace);
}

button:active {
  background-color: var(--ButtonShadow);
}