/*@font-face { font-family: nerd; src: url('nerd-font.ttf'); }
@font-face { font-family: nerd; font-weight: bold; src: url('nerd-font-bold.ttf'); }*/
:root {
  --black:#06080a;
  --bg0:#1a1b26;
  --bg1:#232433;
  --bg2:#2a2b3d;
  --bg3:#32344a;
  --bg4:#3b3d57;
  --bg_red:#ff7a93;
  --diff_red:#803d49;
  --bg_green:#b9f27c;
  --diff_green:#618041;
  --bg_blue:#7da6ff;
  --diff_blue:#3e5380;
  --fg:#a9b1d6;
  --red:#F7768E;
  --orange:#FF9E64;
  --yellow:#E0AF68;
  --green:#9ECE6A;
  --blue:#7AA2F7;
  --purple:#ad8ee6;
  --grey:#444B6A;
  --white:#c0caf5;
  /*font-family: nerd, Tahoma, Verdanam, sans-serif;*/
  font-family: monospace, sans-serif;
}
.topnav {
  background-color: var(--bg1);
  overflow: hidden;
}
.topnav a {
  float: left;
  color: var(--fg);
  align-items: center;
  display: inline-flex;
}
.topnav a span{
  padding: 14px 16px;
  font-size: 17px;
  text-decoration: none;
}
.topnav img {
  height: 2em;
  width: auto;
  margin-right: -0.4em;
  margin-left: .4em;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: var(--bg3);
  color: var(--red);
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: var(--bg4);
  color: white;
}

.content {
  max-width: 800px;   /* controls the width of your column */
  margin: 0 auto;     /* centers it horizontally */
  padding: 20px;      /* adds breathing room inside */
}


body{
  background-color:var(--bg0);
}
h1{
  color:var(--orange);
}
h2{
  color:var(--purple);
}
p{
  color:var(--white);
}
ul{
  color:var(--white);
}