scribbler styling

style.css

.hero__terminal {
  width: 60%;
  margin: -11rem auto 3rem auto;
  text-align: left;
  color: white;
  padding: 0 1rem;
  border-radius: 4px;
  background-color: #232323;
  min-height: 285px;
  animation: fadeUp 2s;
  box-shadow: 0px 12px 36.8px 9.2px rgba(0, 0, 0, 0.1);
}

.hero__terminal pre {
  white-space: pre-line;
  padding-top: 1rem;
}

/* callout section */
.callout {
  text-align: center;
  padding: 1rem 0 3rem 0;
}

.callout .button--primary {
  display: inline-block;
  margin-top: 0.5rem;
}

.hljs {
    display: block;
    overflow-x: auto;
    padding: 0.5em;
    background: #232323;
    color: #e6e1dc
}

.hljs-comment,.hljs-quote {
    color: #bc9458;
    font-style: italic
}

.hljs-keyword,.hljs-selector-tag {
    color: #c26230
}

.hljs-string,.hljs-number,.hljs-regexp,.hljs-variable,.hljs-template-variable {
    color: #a5c261
}

.hljs-subst {
    color: #519f50
}

.hljs-tag,.hljs-name {
    color: #e8bf6a
}

.hljs-type {
    color: #da4939
}

.hljs-symbol,.hljs-bullet,.hljs-built_in,.hljs-builtin-name,.hljs-attr,.hljs-link {
    color: #6d9cbe
}

.hljs-params {
    color: #d0d0ff
}

.hljs-attribute {
    color: #cda869
}

.hljs-meta {
    color: #9b859d
}

.hljs-title,.hljs-section {
    color: #ffc66d
}

.hljs-addition {
    background-color: #144212;
    color: #e6e1dc;
    display: inline-block;
    width: 100%
}

.hljs-deletion {
    background-color: #600;
    color: #e6e1dc;
    display: inline-block;
    width: 100%
}

.hljs-selector-class {
    color: #9b703f
}

.hljs-selector-id {
    color: #8b98ab
}

.hljs-emphasis {
    font-style: italic
}

.hljs-strong {
    font-weight: bold
}

.hljs-link {
    text-decoration: underline
}

@media (max-width: 750px) {
  .hero__terminal {
    width: 70%;
  }
}