:root {
	--bg:  white;
	--fg:  black;
}

@keyframes orbit {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

body {
	font-family: Bahnschrift, Avant Guard, Helvetica, Arial Rounded MT, Arial, sans-serif;
}

body, nav {
	background-color: var(--bg);
	color: var(--fg);
}

body.fishtank nav {
	display:  none;
}

@media only screen and (min-width: 768px) {
	nav {
		position: fixed;
		bottom: 0px;
		transform: translateY(calc(100% - 1.5em));
		padding: 0 1em;
		opacity: 0.5;
		transition: 1s opacity;
		transition: 1s transform;
	}

	nav:before {
		font-family: Courier, monospace;
		display: inline-block;
		content: "▲ ▲ ▲";
		text-align: center;
		width: 100%;
	}

	nav:hover,
	nav.sticky {
		animation: slide-in 1s forwards;
		transform: translateY(0%);
		opacity: 1.0;
		transition: 1s opacity;
		transition: 1s transform;
	}
}

#logo {
	position: relative;
	animation: orbit 30s infinite linear;
	margin-top:  calc(25% - 256px);
	z-index: -1;
	width: 512px;
}

#loading {
	background-color: var(--bg);
	padding: 4px;
}

#starfield {
	position: absolute;
	z-index: -2;
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;          /* Likely future */     
}

center { cursor: pointer; }

svg > path { stroke: var(--bg); }

svg > g > *[fill="none"] { stroke: var(--fg); }

svg > g > *:not([fill="none"]) { fill: var(--fg); }

body.invert,
body.invert nav {
	background-color: var(--fg);
	color: var(--bg);
}

body.invert #loading{ background-color: var(--fg); }

body.invert svg > path { stroke: var(--fg); }
body.invert svg > g > *[fill="none"]       { stroke: var(--bg); }
body.invert svg > g > *:not([fill="none"]) { fill:   var(--bg); }

            a { color: var(--fg); }
body.invert a { color: var(--bg); }

a:before { content: "[["; }
a:after  { content: "]]"; }

            nav { border-top: 1px solid var(--fg); }
body.invert nav { border-top: 1px solid var(--bg); }