:root {
	--color-black: #111;
	--color-white: #eee;
	--color-carbon: #345;
	--color-paper: #dcc;

	--color-plume: #e4d;
	--color-blood: #d44;
	--color-clementine: #d62;
	--color-wheat: #e91;
	--color-lemon: #ec1;
	--color-stone: #999;

	--color-field: #8ca;
	--color-forest: #171;
	--color-sky: #47c;
	--color-sea: #15a;
	--color-grape: #b6e;
	--color-bark: #641;

	color-scheme: light dark;
	--color-bg: var(--color-white);
	--color-ui: var(--color-paper);
	--color-fg: var(--color-black);
	--color-fg-secondary: var(--color-stone);
	--color-accent: var(--color-clementine);
	--color-accent-secondary: var(--color-plume);
}

/* @media (prefers-color-scheme: dark) { */
	/* :root { */
		/* --color-bg: var(--color-carbon); */
		/* --color-ui: var(--color-black); */
		/* --color-fg: var(--color-white); */
		/* --color-fg-secondary: var(--color-paper); */
		/* --color-accent: var(--color-clementine); */
		/* --color-accent-secondary: var(--color-plume); */
	/* } */
/* } */

html {
  height: 100%;
  overflow: visible;
  font-size: 16px;
}
body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;

  background: var(--color-bg);
  color: var(--color-fg);
  
  /* align-items: center; */
  margin: 0;
  gap: 4px;
}
body * {
  flex-shrink: 0;
  font-family: "Verdana", sans-serif;
}
img, video {
  height: auto;
  max-width: 100%;
}
a {
  text-decoration: none;
  font-weight: bold;
  color: var(--color-accent);

  transition-property: color;
  transition-duration: 0.5s;
}
a:focus {
  outline-width: 2px;
}
a:hover, a:active {
  color: var(--color-accent-secondary);
}

nav {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end;
  overflow: hidden;
  
  font-size: 18pt;
  font-family: "Verdana", system-ui;
  
  min-height: 60px;
  user-select: none;
  
  background: linear-gradient(to bottom, transparent, #aaa1);
  /* --logo-accent-color: var(--main-color); */
}
nav > a {
  /* background: linear-gradient(to right, transparent, #aaa1) */
}
nav embed {
  display: inline-block;
  user-select: none;
  min-height: 1.8em;
}

main {
  margin: 1em;
  margin-top: auto;
  margin-bottom: auto;
  /* min-height: calc(100% - 120px); */

  display: flex;
  flex-flow: column nowrap;

  align-items: center;
  justify-content: center;
  text-align: center;
}
section {
  display: flex;
  flex-flow: row wrap;

  align-items: center;
  justify-content: center;
  text-align: left;
}
footer {
  font-family: serif;
  margin-top:auto;
  margin-bottom: 1px;
  font-size: 7pt;
  text-align: center;

  opacity: 70%;
}