:root {
  --electric-blue-200: #DAF0FF;
  --electric-blue-400: #B6E0FF;
  --electric-blue-600: #91D1FF;
  --electric-blue-800: #6CC1FF;
  --electric-blue-1000: #48B2FF;

  --charcoal-100: #F7F9FC;
  --charcoal-200: #DDDFE2;
  --charcoal-400: #AAACAF;
  --charcoal-500: #86939B;
  --charcoal-600: #787A7D;
  --charcoal-800: #45474A;
  --charcoal-900: #1B2326;
  --charcoal-1000: #131417;

  --brand-blue: #3C8BD3;
  --brand-gray: #5E5E5E;
  --dark-gray: #A7A7A7;

  --bg-black: #333333;
}

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body, button, input, pre {
  font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue",
    Helvetica, Arial;
}

html, p, h1, h2, h3, h4, h5, html, blockquote {
  margin: 0;
  padding: 0;
}

li, ol {margin: 0}
ul {margin-top: 0}

body {
  font-size: 1em;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
}

hr {
  margin: 24px 0;
  padding: 0;
  height: .28rem;
  border: 0;
  overflow: hidden;
  box-sizing: content-box;
}

code {
  font-size: 80%;
  border-radius: 5px;
  padding: 2px;
}

.container {
  max-width: 1000px;
  flex-grow: 1;
  margin: 0 auto;
  position: relative;
  width: auto;
}

.navbar>.container {
  display: flex;
  justify-content: space-between;
}

.navbar-brand {
  margin-left: -.75rem;
  display: flex;
  min-height: 3.25rem;
}

.hero, .navbar, .navbar-menu, .navbar-start {
  display: flex;
  align-items: stretch;
}
.navbar {
  margin-bottom: 5px;
}

.navbar-start {
  justify-content: flex-start;
  flex-wrap: wrap;
}
.navbar-item img {max-height: 3rem}

img { max-width: 100%; height: auto }

.navbar-link, a.navbar-item {
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: .5rem .75rem;
  position: relative;
  text-decoration: none;
  font-weight: bold;
  font-size: 21px;
  color: var(--charcoal-400);
}

.navbar-start > a.navbar-item:last-child {
  padding-left: 10px;
}

code, pre {
  -moz-osx-font-smoothing: auto;
  -webkit-font-smoothing: auto;
  font-family: SFMono-Regular, ui-monospace, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
}

.mono {
  font-family: SFMono-Regular, ui-monospace, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  font-size: 110%;
}

pre {
  padding: 1.25rem 1.5rem;
  white-space: pre;
  word-wrap: normal;
  overflow-x: auto;
}

pre code {
  background-color: transparent;
  color: currentColor;
  padding: 0;
}

p, .paragraph {max-width: 88ch;}
p {
  display: block;
  margin-block-start: 0.4em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

.section {padding: 1rem 2rem}
@media (max-width: 55em) {
  .section {padding: 1rem 1rem}
}

.subtitle {margin-top: -1.5rem}

figure {
  display: flex;
  align-items: center;
  flex-direction: column;
}
p > img {margin: auto }

/* Responsive sizes */
.huge {font-size: 3.45rem}
h1, .bigger {font-size: 2.5rem}
h2, .big {font-size: 2.1rem}
h3, .medium {font-size: 1.7rem}
h4, .smedium {font-size: 1.5rem}
p, li, th, pre, blockquote, .small {font-size: 1.28rem}
.tiny {font-size: 1rem}
pre {font-size: 1.2rem; line-height: 1.25}

@media (max-width: 55em) {
  .huge {font-size: 2.85rem}
  h1, .bigger {font-size: 2rem}
  h2, .big {font-size: 1.8rem}
  h3, .medium {font-size: 1.5rem}
  h4, .smedium {font-size: 1.3rem}
  p, li, th, blockquote, .small {font-size: 1.1rem}
  pre {font-size: 1rem; line-height: 1}
}

hr, .hero {background-color: #4A4A4A}
blockquote {border-left: 5px solid #4A4A4A}
blockquote > p {color: #DBDBDB}
pre {background-color: #262626}
code {background-color: #4A4A4A}
th {border: 1px solid var(--charcoal-100)}
a {color: #63C0F4}
a:hover {color: #A3DEFF}
a.navbar-item:hover {background-color: #262626}
li {color: #F9F7F7; text-decoration: #F9F7F7;}

.keyword {color: #c78bc8; font-style: italic;}
.keyword-import {color: #c78bc8;}
.terminator {color: #A6ACB9;}
.type-primitive {color: #6eaadf; font-style: italic;}
.string {color: #99c794;}
.comment {color: #a6acb9;}
.operator {color: #e07457;}

body, html {background-color: var(--bg-black)}
div, h1, h2, h3, h4, p, code, pre, th, figcaption {color: white}