:root {
  --highlight-color: #44A4E9;
  --background-color: #20292D;
  --background-effect-color: #293539;
  --background-effect-2-color: #495F68;
  --base-color: white;
  --secondary-color: #ADADAD;
  --heading-color: var(--highlight-color);
  --panel-background-color: #12191C;
  --panel-text-color: white;
  --panel-highlight-text-color: var(--panel-text-color);
  --panel-hightlight-background-color: var(--highlight-color);
}
@media (prefers-color-scheme: light) {
  :root {
    --highlight-color: #126cae;
    --background-color: #f8f8f8;
    --background-effect-color: #f1f1f1;
    --background-effect-2-color: #d1d1d1;
    --base-color: #030202;
    --secondary-color: #252b31;
    --heading-color: #2c8ad2;
    --panel-background-color: #ffffff;
    --panel-text-color: var(--highlight-color);
    --panel-highlight-text-color: white;
    --panel-hightlight-background-color: var(--highlight-color);
  }
}
html {
  font-size: 18px;
  line-height: 29px;
}
body {
  font-size: 1em;
  line-height: 1.61111111em;
  max-width: 1200px;
  padding: 0 1em;
  margin: auto;
  background: var(--background-color);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: var(--base-color);
  -webkit-font-smoothing: antialiased;
}
h1 {
  font-size: 4.22222222em;
  line-height: 1.14473684em;
  margin-top: 0.38157895em;
  margin-bottom: 0.7631579em;
}
h2 {
  font-size: 2.61111111em;
  line-height: 1.23404255em;
  margin-top: 0.61702128em;
  margin-bottom: 0.61702128em;
}
h3 {
  font-size: 1.61111111em;
  line-height: 1em;
  margin-top: 1em;
  margin-bottom: 0em;
}
h4,
h5 {
  font-size: 1em;
  line-height: 1.61111111em;
  margin-top: 1.61111111em;
  margin-bottom: 0em;
}
p,
ul,
ol,
pre,
table,
blockquote {
  margin-top: 0em;
  margin-bottom: 1.61111111em;
  padding: 0;
}
p.title {
  font-size: 1.61111111em;
  line-height: 1.61111111em;
  margin-top: 0.61702128em;
  margin-bottom: 0.81702128em;
}
ul ul,
ol ol,
ul ol,
ol ul {
  margin-top: 0em;
  margin-bottom: 0em;
}
a,
b,
i,
strong,
em,
small,
code {
  line-height: 0;
}
h1,
h2,
h3,
h4,
p.title {
  font-weight: normal;
}
h1,
h2,
h4 {
  color: var(--heading-color);
}
a {
  color: var(--highlight-color);
}
a:hover {
  color: var(--base-color);
}
a:hover svg {
  fill: var(--highlight-color);
}
p small {
  font-size: 0.777777em;
  display: block;
  color: var(--secondary-color);
  padding-top: 0.5em;
  padding-bottom: 1em;
  font-weight: 500;
}
svg {
  height: 100%;
  fill: var(--base-color);
}
header {
  display: flex;
  justify-content: flex-start;
  padding-bottom: 0.61111111em;
  flex-wrap: wrap;
}
header > div {
  margin: 1em 0;
}
@media screen and (max-width: 900px) {
  header {
    flex-direction: column;
  }
  header > div {
    justify-content: center;
  }
  header #contact .stats {
    float: none;
    justify-content: center;
  }
}
#menu {
  display: flex;
  flex-wrap: wrap;
  line-height: 3.22222222em;
}
#menu ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#menu ul,
#menu ul li {
  margin: 0;
  padding: 0;
}
#menu ul li {
  padding: 0 1em;
}
#menu ul li a {
  text-decoration: none;
}
#menu ul li.active {
  color: var(--highlight-color);
}
#contact {
  flex-grow: 1;
}
#contact .stats {
  float: right;
}
#contact .stats ul li:last-child {
  margin-right: 0;
}
#logo {
  display: block;
  width: 3.22222222em;
  height: 3.22222222em;
  margin-right: 1em;
}
@media screen and (max-width: 500px) {
  html {
    font-size: 15px;
    line-height: 24px;
  }
  #menu {
    flex-direction: column;
    line-height: 1.61111111em;
  }
  #menu #logo {
    margin: 1.61111111em auto;
  }
  #contact {
    margin: 0;
  }
}
#background {
  position: fixed;
  z-index: -1;
  height: 662px;
  top: 150px;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
}
#background svg .first-dots {
  fill: var(--background-effect-color);
}
#background svg .second-dots {
  fill: var(--background-effect-2-color);
}
/* Let's make sure all's aligned */
hr,
.hr {
  border: 1px solid;
  margin: -1px 0;
}
section {
  max-width: 644px;
  margin: 0 auto;
}
ul.stats {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
ul.stats li {
  margin: 0.5em 1em 0.5em 0;
  padding: 0;
  background: var(--panel-background-color);
  border-radius: 0.275862069em;
}
@media screen and (max-width: 400px) {
  ul.stats li {
    font-size: 0.7em;
  }
}
ul.stats li span,
ul.stats li a {
  line-height: 2.22222222em;
  display: block;
  padding: 0 0.5555555556em;
  height: 100%;
  text-decoration: none;
  color: var(--panel-text-color);
}
ul.stats li svg {
  vertical-align: middle;
  margin-top: -0.27777778em;
  height: 1.1111111111em;
  fill: var(--panel-text-color);
}
ul.stats li:hover {
  background: var(--panel-hightlight-background-color);
}
ul.stats li:hover span,
ul.stats li:hover a {
  color: var(--panel-highlight-text-color);
}
ul.stats li:hover span svg,
ul.stats li:hover a svg {
  fill: var(--panel-highlight-text-color);
}