:root {
  --cRedH:		#F02040;
  --cRedM:		#B01020;
  --cRedL:		#700810;
  --cOrangeH:	#F08020;
  --cOrangeM:	#B04010;
  --cOrangeL:	#700008;
  --cYellowH:	#F0E040;
  --cYellowM:	#B0A020;
  --cYellowL:	#706010;
  --cGreenH:	#20F040;
  --cGreenM:	#10D020;
  --cGreenL:	#08B010;
  --cAquaH:		#40E0F0;
  --cAquaM:		#20A0B0;
  --cAquaL:		#106070;
  --cBlueH:		#2040F0;
  --cBlueM:		#1020B0;
  --cBlueL:		#081070;
  --cPurpleH:	#F040E0;
  --cPurpleM:	#B020A0;
  --cPurpleL:	#701060;
  --cWhite:		#F0F0F0;
  --cGrey1:		#E0E0E0;
  --cGrey2:		#D0D0D0;
  --cGrey3:		#C0C0C0;
  --cGrey4:		#B0B0B0;
  --cGrey5:		#A0A0A0;
  --cGrey6:		#909090;
  --cGrey7:		#808080;
  --cGrey8:		#707070;
  --cGrey9:		#606060;
  --cGrey10:	#505050;
  --cGrey11:	#404040;
  --cGrey12:	#303030;
  --cGrey13:	#202020;
  --cBlack:		#101010;
}

* {
  margin: 0%;
}

html {
  height: 100%
}

body {
  font-family: monospace;
  /**/font-size: 16px;/**/
  /*font-size: calc(16px + 0.125vmin);/**/
  background: var(--cBlack);
  color: var(--cGrey4);
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

header {
  background-color: var(--cGrey13);
  width: stretch;
  padding: 1%;
  flex-shrink: 0;
}
.headerContent {
}

main {
  width: stretch;
  padding: 1%;
  flex-grow: 1;
}
.mainContent {
}

footer {
  /**/font-size: 12px;/**/
  /*font-size: calc(12px + 0.125vmin);/**/
  background-color: var(--cGrey13);
  bottom: 0;
  width: stretch;
  padding: 1%;
  flex-shrink: 0;
}
.footerContent {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.buttonRow {
  flex-direction: row;
  align-items: space-between;
}

h1, h2 {
  color: var(--cRedH);
}
h3, h4, h5, h6 {
  color: var(--cGrey2);
}
strong, b {
  color: var(--cRedM)
}

/* Tooltips */
#tooltip {
  cursor: pointer;
  color: var(--cWhite);
  text-decoration: underline var(--cOrangeH) dotted 0.2vmin;
}

pre {
  margin: 2px;
  width: fit-content;
  font-family: monospace;
  background: var(--cGrey12);
  color: var(--cGrey2);
  font-size: 16px;
  text-align: left;
  padding: 2px;
  border: 2px solid var(--cOrangeH);
  &:before {
    display: block;
    width: 100%;
    margin-left: -2px;
    margin-top: -2px;
    padding: 2px;
    text-transform: uppercase;
    content: attr(lang);
    background: var(--cOrangeL);
  }
}

/* Define styling for external links. */
a[href^="http"]:link {
  cursor: pointer;
  text-decoration: none;
  color: var(--cGreenH);
}
a[href^="http"]:visited {
  color: var(--cGreenL);
}
a[href^="http"]:hover {
  color: var(--cGrey12);
  background-color: var(--cGreenH);
}
a[href^="gemini"]:link {
  cursor: pointer;
  text-decoration: none;
  color: var(--cGreenH);
}
a[href^="gemini"]:visited {
  color: var(--cGreenL);
}
a[href^="gemini"]:hover {
  color: var(--cGrey12);
  background-color: var(--cGreenH);
}

/* Define styling for internal links. */
a:link {
  cursor: pointer;
  text-decoration: none;
  color: var(--cAquaH);
}
a:visited {
  color: var(--cAquaL);
}
a:hover {
  color: var(--cGrey12);
  background-color: var(--cAquaH);
}

/* Images will be crisp. */
img {
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
}