:root {
  --color-primary-green: #E9EC6B;
  --color-primary-blue: #6BE9EC;
  --color-primary-pink: #EC6BE9;
  --color-green: #0D0E02;
  --color-blue: #020D0E;
  --color-pink: #0E020D;
  --color-inv-green: #FBFCE4;
  --color-inv-blue: #E4FBFC;
  --color-inv-pink: #FCE4FB; }

* {
  margin: 0;
  padding: 0; }

html, body {
  font-size: 20pt;
  font-family: sans-serif;
  background: var(--color-blue);
  color: var(--color-inv-blue); }

main {
  max-width: 888pt;
  margin: 0 auto;
  position: relative;
  min-height: 100vh;
  overflow-y: hidden;
  z-index: 1; }
  main::after {
    content: '';
    position: absolute;
    top: -128pt;
    left: 0;
    right: 0;
    min-height: 512pt;
    opacity: 0.33;
    z-index: -1;
    background: url(/neptune.png) no-repeat;
    background-position: center;
    background-size: 512pt;
    pointer-events: none; }

h1, h2, h3, h4, h5, h6 {
  font-weight: bold; }

h1 {
  font-size: 4em; }

h2 {
  font-size: 3.5em; }

h3 {
  font-size: 3em; }

h4 {
  font-size: 2.5em; }

h5 {
  font-size: 2em; }

h6 {
  font-size: 1.5em; }

code, pre {
  font-family: monospace; }

header {
  color: var(--color-primary-green);
  font-weight: bold;
  font-size: 1.5em;
  margin: 0 128pt;
  margin-top: 256pt; }

figure {
  color: var(--color-primary-pink);
  font-weight: 200;
  font-size: 0.8em; }
  figure span[title] {
    text-decoration: dotted underline; }

article {
  margin: 15pt; }

footer {
  color: var(--color-primary-blue); }
  footer figure {
    color: var(--color-primary-blue); }

a {
  color: var(--color-primary-green); }
  a:hover {
    color: var(--color-primary-pink); }
  a img {
    vertical-align: text-bottom; }

small {
  font-size: 0.8em; }

ul.buttons {
  list-style: none; }
  ul.buttons li {
    display: inline; }
  ul.buttons a {
    text-decoration: none;
    margin: 0;
    font-size: 0; }
    ul.buttons a img {
      font-size: 20pt; }

footer {
  margin: 0 128pt;
  font-size: 0.75em; }

section {
  margin: 16pt 128pt; }
  section a {
    display: block;
    margin: 5pt 0; }
  section img {
    width: 24pt; }

ruby > rt {
  font-size: 75%;
  font-weight: lighter; }

@media (prefers-color-scheme: light), print {
  /*
	:root {
		--color-primary-green: #c3c559;
		--color-primary-blue: #59c3c5;
		--color-primary-pink: #c559c3;
		--color-green: #FBFCE4;
		--color-blue: #E4FBFC;
		--color-pink: #FCE4FB;
		--color-inv-green: #0D0E02;
		--color-inv-blue: #020D0E;
		--color-inv-pink: #0E020D;
	}
}

@media print { */
  :root {
    --color-primary-green: black;
    --color-primary-blue: black;
    --color-primary-pink: black;
    --color-green: white;
    --color-blue: white;
    --color-pink: white;
    --color-inv-green: black;
    --color-inv-blue: black;
    --color-inv-pink: black; }
  main::after {
    display: none; }
  header {
    margin-top: 16pt; } }

@media (max-width: 900pt) {
  body {
    font-size: 16pt; }
  header, section, footer {
    margin: 16pt; } }