#documentation {
  background-color: #ededed;
  padding: 80px 0;
  overflow-x: hidden;
}
#documentation > h2 {
  text-align: center;
}
.content-block { display: flex; justify-content: center; }
.spine {
  flex: 0 0 120px; margin: 0; width: 100%; align-self: stretch;
  display: flex; flex-direction: column;
}
.spine .timeline { flex: 1 1 100%; align-self: center; }
.timeline div { display: inline-block; border-left: 1px dashed #395c6b; width: 1px; box-sizing: border-box; height: 100%; }
.spine .point {
  margin: 10px auto; flex: 0 0 auto; display: inline-block;
  width: 24px; height: 24px; border: 2px dotted #e27152; border-radius: 50%;
}
.code-editor {
  width: 420px; background-color: #161e28; border-radius: 8px;
  box-shadow: 0 0 2px rgba(22,35,40,.11), 0 0 4px rgba(22,35,40,.11),
    0 0 8px rgba(22,35,40,.17), 0 4px 16px rgba(22,35,40,.17),
    0 12px 32px rgba(22,35,40,.17), 0 28px 64px rgba(22,35,40,.17);
  margin: 45px 0;
}
.code-editor-navbar {
  padding: 15px 55px 0 20px; display: flex; align-items: center; justify-content: flex-start;
}
.code-editor-navbar .controls { flex: 0 0 35px; display: flex; align-items: center; justify-content: flex-start; }
.code-editor-navbar .controls .button { margin-right: 4px; width: 9px; height: 9px; border-radius: 50%; }
.code-editor-navbar .controls .button:nth-child(1) { background-color: #fc605b; }
.code-editor-navbar .controls .button:nth-child(2) { background-color: #fdbc40; }
.code-editor-navbar .controls .button:nth-child(3) { background-color: #33c748; }
.code-editor-navbar .title {
  flex: 1 1 auto; text-align: center; font-family: 'Source Code Pro', monospace;
  color: rgba(255,255,255,.5); font-size: 14px;
}
.code-editor .code-block {
  margin: 0 20px; padding: 18px 0 20px; color: #fff; font-size: 14px;
  overflow-x: auto; font-family: 'Source Code Pro', monospace;
}
.code-editor .token-line {
  position: relative; white-space: nowrap; padding-left: 25px; color: #bfc7d5; line-height: 1.8;
}
.token-line .lead { top: 0; left: 0; opacity: .6; text-align: right; position: absolute; display: inline-block; color: #727c86; font-size: inherit; }
.token-line .italics { font-style: italic; }
.token-line .keyword { color: #ffcb6b; }
.token-line .operation { color: #ff6d91; }
.token-line .string { color: #c3e88d; }
.token-line .comment { color: #546e7a; font-style: italic; }
.content-text {
  font-family: 'Source Sans 3', sans-serif; display: inline-flex; align-items: center;
  max-width: 420px; font-size: 18px; color: #010028; text-align: justify;
  flex-direction: column; justify-content: center;
}
.content-text h3 { margin: 0; font-size: 24px; font-weight: 700; font-family: 'Source Sans 3', sans-serif; width: 100%; }
.content-text p { margin: 0; padding-top: 10px; font-size: 16px; color: #444; line-height: 1.7; width: 100%; }
.content-text.left h3, .content-text.left p { text-align: right; }
.content-text.right h3, .content-text.right p { text-align: left; }
.docs-icon-wrapper {
  margin-bottom: 15px; width: 32px; height: 32px; line-height: 1; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  font-size: 15px; border: 1px solid rgba(57,92,107,.3); color: rgba(57,92,107,.7);
}
.content-text.right .docs-icon-wrapper { margin-right: auto; }
.content-text.left .docs-icon-wrapper { margin-left: auto; }
.stat-row { display: flex; gap: 24px; margin-top: 16px; width: 100%; }
.content-text.left .stat-row { justify-content: flex-end; }
.content-text.right .stat-row { justify-content: flex-start; }
.stat-row .s-num { font-size: 20px; font-weight: 900; font-style: italic; color: #010028; font-family: 'Poppins', sans-serif; }
.stat-row .s-label { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: #888; margin-top: 2px; }
@media only screen and (max-width: 991px) {
  .content-text { margin: 0 25px; }
  .spine { display: none; }
  .content-text h3 { font-size: 18px !important; }
  .content-text p { font-size: 14px !important; }
  #documentation > h2 { font-size: 36px; }
  .sh2-dark, .sh2-light { font-size: 32px; }
}
@media only screen and (max-width: 760px) {
  .content-block { flex-wrap: wrap; }
  .content-text { order: 1; }
  .code-editor { order: 2; }
}
@media only screen and (max-width: 600px) {
  .token, .token-line, .code-editor-navbar .title { font-size: 12px; }
  .code-editor { width: 100%; max-width: 360px; }
}