:root { 
  --hl:#12ABCD;
  --white:#EEEEEE;
  --black:#111111;
}
body {
  background-color:#222222;
  color:#F8FCFF;
  margin: auto;
  font-family:"Constantia", "Georgia", Serif;
}
  @media only screen and (max-width: 500px) {
    body {margin:auto;
    max-width:85%;}
}
p {
  color:var(--white);
  line-height:1.6;
}
h1 {
  background-color:var(--black);
  color:var(--hl);
}
h2 {
  color:var(--hl);
}
h3 {
   background-color:var(--black);
  color:var(--white);
}
h4 {
   background-color:var(--black);
  color:var(--white);
}
h5 {
   background-color:var(--black);
  color:var(--white);
}
h6 {
   background-color:var(--black);
  color:var(--h1);
}
ul {
  background-color:var(--black);
  color:var(--h1);
}
a {
  color:var(--hl); 
}
.top-container {
  background-color: var(--black);
  padding: 30px;
  text-align: left;
}
.header {
  padding: 2px;
  background: var(--black);
  color: #eeeeee;
}

/* Page content */
.content {
  padding: 0px;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 155px;
}