:root {
	/* Set sans-serif & mono fonts */
	--sans-font: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
	--serif-font: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
	--mono-font: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
	--standard-border-radius: 5px;
	--border-width: 1px;

	/* Default (light) theme */
	--bg: #F6F6F6;
	--accent-bg: #FFDCEC;
	--text: #222222;
	--text-light: #3E3E3E;
	--border: #8B8B8B;
	--accent: #D2008F;
	--accent-hover: #790051;
	--accent-text: var(--bg);
	--code: #008147;
	--preformatted: #3E3E3E;
	--marked: #00FFE4;
	--disabled: #E2E2E2;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
		--bg: #222222;
		--accent-bg: #790051;
		--text: #F6F6F6;
		--text-light: #E2E2E2;
		--accent: #FF2FB2;
		--accent-hover: #FFDCEC;
		--accent-text: var(--bg);
		--code: #00A05A;
		--preformatted: #E2E2E2;
		--disabled: #3E3E3E;
	}
}

:root {
	--marquee-duration: 45s;
}

.marquee {
  overflow: hidden;
  white-space: nowrap;
}

.marquee div {
  padding-left: 100%;
  width: max-content;
  animation: marquee var(--marquee-duration) linear infinite;
}

.marquee div:hover {
  animation-play-state: paused
}

.marquee p {
  display: inline;
}

@keyframes marquee {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee div {
    overflow: scroll;
    padding-left: 0;
    width: auto;
    animation: none;
  }
}