

:root {
  --gabBrightColor: #ccc;
  --gabBrighterColor: #eee;
  --gabBrightHighlightColor: #00ffa8;
  --gabBrighterHighlightColor: #80ffd4;
  --gabDarkColor:#13171f;
  --gabContentWidth:800px;
}
* {
  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: 20px; }
footer a { color: var(--gabBrightColor) !important; }

p { margin: 0 0 .5em 0; }
ul, ol { margin: 0 0 0 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: .5em .8em; margin: 1em 0; font-size: 1em; cursor: pointer; border-radius: 3px; }
button:hover { background: var(--gabBrighterHighlightColor); box-shadow: 0px 0 .5em #fff8; }
button:active { background: var(--gabBrighterColor); }

input, textarea { padding: .5em .8em; font-size: .85em; background: #212836; color: var(--gabBrightColor); appearance: none; border: 1px solid #2c3649; box-sizing: border-box; outline: 0px solid #fff0; transition: outline-color .5s ease-in-out; border-radius: 3px; }

textarea:focus, input:focus { outline: 2px solid var(--gabBrightHighlightColor); }

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

.gabBgBright { background: var(--gabBrightColor); color: var(--gabDarkColor); }
.gabContentBox { width:var(--gabContentWidth); overflow:auto; margin:0 auto; padding: 0 1em; }
.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 { float:right; text-align: right; }
.gabNav button { margin:1em 0; background: white; padding: .3em .5em; }
.gabNav a { margin:0 .1em; color: white; }

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