:root {
  --bg-color: #0F0F0F;
  --fg-color: #FFFFFF;
}

html {
  align-items:      center;
  background-color: var(--bg-color);
  color:            var(--fg-color);
  display:          flex;
  font-family:      monospace;
  font-size:        1.5em;
  justify-content:  center;
  min-height:       100vh;
}

#pride-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 20px;
}

/* .color.red    { background-color: rgb(228, 3, 3);    height: 16.66%; } */
/* .color.orange { background-color: rgb(255, 140, 0);  height: 16.66%; } */
/* .color.green  { background-color: rgb(0, 128, 38);   height: 16.66%; } */
/* .color.blue   { background-color: rgb(0, 76, 255);   height: 16.66%; } */
.color.yellow { background-color: #FFF433; height: 25%; }
.color.white  { background-color: #FFF8E7; height: 25%; }
.color.purple { background-color: #9B59D0; height: 25%; }
.color.black  { background-color: #2D2D2D; height: 25%; }

header { padding-top: 25px; }

::selection {
  background-color: var(--fg-color);
  color: var(--bg-color);
}

a, a:visited { color: var(--fg-color); }