:root {
  /* --global-font-size: 15px; */
  --global-line-height: 1.4em;
  --global-space: 10px;
  --font-stack: JetBrains Mono, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
  --mono-font-stack: JetBrains Mono, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
  --background-color: #003153;
  --page-width: 70ch;
  --font-color: #FFFFFF;
  --invert-font-color: #fff;
  --primary-color: #8DECF7;
  --secondary-color: #B6E7DF;
  --error-color: #d20962;
  --progress-bar-background: #740101;
  --progress-bar-fill: #151515;
  --code-bg-color: #004170;
  --input-style: solid;
  --display-h1-decoration: none
}

* {
  /* box-sizing: border-box; */
  text-rendering: geometricPrecision
}

::-moz-selection {
  background: var(--primary-color);
  color: var(--invert-font-color)
}

::selection {
  background: var(--primary-color);
  color: var(--invert-font-color)
}

body {
  font-size: var(--global-font-size);
  color: var(--font-color);
  line-height: var(--global-line-height);
  margin: 0;
  font-family: var(--font-stack);
  word-wrap: break-word;
  background-color: var(--background-color)
}

.logo,
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: var(--global-line-height)
}

a {
  cursor: pointer;
  color: var(--primary-color);
  text-decoration: none
}

a:hover {
  color: #b6e7df;
  text-decoration: underline
}

em {
  font-size: var(--global-font-size);
  font-style: italic;
  font-family: var(--font-stack);
  color: var(--font-color)
}

code,
em,
strong {
  line-height: var(--global-line-height)
}

.logo,
code,
footer,
h1,
h2,
h3,
h4,
h5,
h6,
header,
li,
p,
ul {
  float: none;
  margin: 0;
  padding: 0
}

.logo,
h1,
p,
ul {
  margin-top: calc(var(--global-space) * 2);
  margin-bottom: calc(var(--global-space) * 2)
}

.logo,
h1 {
  position: relative;
  display: inline-block;
  display: table-cell;
  padding: calc(var(--global-space) * 2) 0 calc(var(--global-space) * 2);
  margin: 0;
  overflow: hidden;
  font-weight: 600
}

h1::after {
  content: "====================================================================================================";
  position: absolute;
  bottom: 5px;
  left: 0;
  display: var(--display-h1-decoration)
}

.logo+*,
h1+* {
  margin-top: 0
}

h2,
h3,
h4,
h5,
h6 {
  position: relative;
  margin-bottom: var(--global-line-height);
  font-weight: 600
}

code {
  font-weight: inherit;
  background-color: var(--code-bg-color);
  font-family: var(--mono-font-stack)
}

code::after,
code::before {
  content: "`";
  display: inline
}

.terminal .logo,
.terminal code,
.terminal h1,
.terminal h2,
.terminal h3,
.terminal h4,
.terminal h5,
.terminal h6,
.terminal strong {
  font-size: var(--global-font-size);
  font-style: normal;
  font-family: var(--font-stack);
  color: var(--font-color)
}

.terminal-prompt {
  position: relative;
  white-space: nowrap
}

.terminal-prompt::before {
  content: "> "
}

.terminal-prompt::after {
  content: "";
  -webkit-animation: cursor .8s infinite;
  animation: cursor .8s infinite;
  background: var(--primary-color);
  border-radius: 0;
  display: inline-block;
  height: 1em;
  margin-left: .2em;
  width: 3px;
  bottom: -2px;
  position: relative
}

@-webkit-keyframes cursor {
  0% {
    opacity: 0
  }

  50% {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

@keyframes cursor {
  0% {
    opacity: 0
  }

  50% {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

li,
li>ul>li {
  position: relative;
  display: block;
  padding-left: calc(var(--global-space) * 2)
}

li::after {
  position: absolute;
  top: 0;
  left: 0
}

ul>li::after {
  content: "-"
}

ul ul {
  margin-top: 0;
  margin-bottom: 0
}

hr {
  position: relative;
  overflow: hidden;
  margin: calc(var(--global-space) * 4) 0;
  border: 0;
  border-bottom: 1px dashed var(--secondary-color)
}

p {
  margin: 0 0 var(--global-line-height);
  color: var(--global-font-color)
}

.container {
  max-width: var(--page-width)
}

.container {
  margin: 0 auto;
  padding: 0 calc(var(--global-space) * 2)
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--global-line-height) 0;
  color: var(--font-color);
  font-size: var(--global-font-size)
}

table td,
table th {
  vertical-align: top;
  border: 1px solid var(--font-color);
  line-height: var(--global-line-height);
  padding: calc(var(--global-space)/ 2);
  font-size: 1em
}

table thead th {
  font-size: 1em
}

table tbody td:first-child {
  font-weight: 700;
  color: var(--secondary-color)
}

.terminal-card {
  border: 1px solid var(--secondary-color)
}

.terminal-card>header {
  color: var(--invert-font-color);
  text-align: center;
  background-color: var(--secondary-color);
  padding: .5em 0
}

.terminal-card>div:first-of-type {
  padding: var(--global-space)
}

.terminal-timeline {
  position: relative;
  padding-left: 70px
}

.terminal-timeline::before {
  content: ' ';
  background: var(--secondary-color);
  display: inline-block;
  position: absolute;
  left: 35px;
  width: 2px;
  height: 100%;
  z-index: 400
}

.terminal-timeline .terminal-card {
  margin-bottom: 25px
}

.terminal-timeline .terminal-card::before {
  content: ' ';
  background: var(--invert-font-color);
  border: 1px solid var(--secondary-color);
  display: inline-block;
  position: absolute;
  margin-top: 25px;
  left: 26px;
  width: 15px;
  height: 15px;
  z-index: 400
}

.terminal-media:not(:last-child) {
  margin-bottom: 1.25rem
}

.terminal-media-body {
  display: table-cell;
  vertical-align: top
}

.terminal-media-content {
  margin-top: .3rem
}