:root {
  --gabBrightColor: #ccc;
  --gabBrighterColor: #eee;
  --gabBrightHighlightColor: #56d7ff;
  --gabBrighterHighlightColor: #adecff;
  --gabDarkColor:#13171f;
  --gabContentWidth:800px;
  --gabSpacerColor: #fff3;
}
* {
  padding: 0;
  margin: 0;
  border: 0;
  line-height: 1.5em;
  font-family: system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif;
}
body { background: var(--gabDarkColor); color: var(--gabBrightColor); font-size: 22px; }

p { margin: 0 0 .5em 0; }

li { margin: .3em 0 .3em 1em; }

a, a:visited { color: var(--gabBrightHighlightColor); }
a:hover { color: var(--gabBrighterHighlightColor); }
a:active { color: var(--gabBrighterColor); }

button { background: var(--gabBrightHighlightColor); color: var(--gabDarkColor); padding: .3em .5em; margin: 1em 0; font-size: 1em; cursor: pointer; }
button:hover { background: var(--gabBrighterHighlightColor); box-shadow: 0px 0 .5em #fff8; }
button:active { background: var(--gabBrighterColor); }

input, textarea { padding: .3em .5em; font-size: .85em; background: var(--gabBrighterColor); }

h1, h2, h3, h4, h5, h6 { letter-spacing:-1px; margin: 0 0 .3em 0; color: var(--gabBrighterColor); }

.gabBgBright { background: var(--gabBrightColor); color: var(--gabDarkColor); }
.gabContentBox { width:var(--gabContentWidth); overflow:auto; margin:0 auto; padding: 0 .5em; }
.gabVertSpacer05 { clear:both; height: .5em; }
.gabVertSpacer1 { clear:both; height: 1em; }
.gabVertSpacer2 { clear:both; height: 2em; }
.gabVertSpacer3 { clear:both; height: 3em; }
.gabFlexCenter { display: flex; align-items: center; justify-content: center;}

.gabNav button { margin:1.5em .3em; background: white; }
.gabNav a { margin:0 .1em; color: white; }

@media( max-width: 800px )
{
   .gabContentBox
   {
      width: calc( 100% - 1em );
   }
}