:root {
  --base-text-color: #001B2E;
  --link-text-color: #C5144A;
  --heading-text-color: #001B2E;
  --background-color: #FFF;
  --header-text-color: #FFF;
  --header-background-color: #294C60;
  --footer-text-color: #FFF;
  --footer-background-color: #294C60;
  --border-color: #001B2E;
  --muted-text-color: #FFF;
  --code-background-color: #f5f6f8;
/*F9C80E*/
/*ADB6C4*/

}


/* --------------------------------------------------
   Base
-------------------------------------------------- */

html {
    font-family: "Space Grotesk", sans-serif;
    color: var(--base-text-color);
    line-height: 1.4;
    font-weight: 400;
}

html,
body {
    margin: 0;
    height: 100%;
}

body {
    background-color: var(--background-color);
    position: relative;
    display: flex;
    flex-direction: column;
}

.wrapper {
    flex-grow: 1;
}


/* --------------------------------------------------
   Links
-------------------------------------------------- */

a {
    text-decoration: none;
}

a[href] {
    color: var(--link-text-color);
}

a[href]:hover {
    text-decoration: underline;
}

a:visited {
    color: var(--link-text-color);
}

.link-passive[href],
.link-passive[href]:hover,
.link-passive:visited {
    text-decoration: unset;
    color: unset;
}


/* --------------------------------------------------
   Header
-------------------------------------------------- */

header {
    width: 100%;
    background: var(--header-background-color);
    display: flex;
    justify-content: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.header-frame {
    display: flex;
    justify-content: space-between;
    color: var(--header-text-color);
}

.header-buttons {
    margin: 2px;
}

.header-logo {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.03em;
    margin: 6px 0;
}


/* --------------------------------------------------
   Article
-------------------------------------------------- */

article {
    width: 100%;
    display: flex;
    justify-content: center;
}

.article-frame,
.header-frame {
    margin: 0 20px;
    width: 800px;
    min-width: 200px;
}

.article-frame {
    min-height: 300px;
}

.article-header {
    padding-top: 60px;
    padding-bottom: 40px;
    margin: 0;

    font-size: 3rem;
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.05;

    color: var(--heading-text-color);
}

.article-content-header {
    padding-top: 30px;

    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.15;

    color: var(--heading-text-color);
}

.article-content {
    padding: 20px 0;
}


/* --------------------------------------------------
   Fornax logo
-------------------------------------------------- */

.fornax-logo {
    margin-top: 40px;

    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;

    color: var(--heading-text-color);
}

@media only screen and (max-width: 625px) {
    .fornax-logo {
        font-size: 12px;
    }
}


/* --------------------------------------------------
   Footer
-------------------------------------------------- */

footer {
    width: 100%;
    background-color: var(--footer-background-color);
    color: var(--footer-text-color);

    display: flex;

    font-size: small;
    padding: 5px 0;

    border-top: 1px solid var(--border-color);
}

.footer-version {
    margin-left: auto;
    padding: 5px;
}

.footer-info {
    margin-left: auto;
    color: var(--muted-text-color);
    padding: 5px;
}


/* --------------------------------------------------
   Separator
-------------------------------------------------- */

.separator {
    margin: 50px 0;
}


/* --------------------------------------------------
   Buttons
-------------------------------------------------- */

.button {
    background-color: #ffffff;

    border: 2px solid var(--border-color);
    border-radius: 3px;

    color: var(--heading-text-color);

    font-family: "Space Grotesk", sans-serif;
    font-size: inherit;
    font-weight: 500;

    padding: 3px 8px;

    cursor: pointer;
}

.button:hover {
    background-color: #eef2fb;
    border-color: #9ba8c4;
}

.button:active {
    background-color: #e3e9f7;
}


/* --------------------------------------------------
   Inputs
-------------------------------------------------- */

.input,
.textarea {
    background-color: #ffffff;

    border: 2px solid var(--border-color);
    border-radius: 3px;

    color: var(--base-text-color);

    font-family: "Space Grotesk", sans-serif;
    font-size: inherit;
}

.input:focus,
.textarea:focus {
    outline: none;
    border-color: var(--heading-text-color);
}

.textarea {
    font-family: ui-monospace, "SFMono-Regular", Consolas,
                 "Liberation Mono", Menlo, monospace;
}


/* --------------------------------------------------
   Source explorer
-------------------------------------------------- */

.source-explore-list {
    list-style: none;
    padding: 0;
}

.source-explore-list-item {
    margin: 5px 0;
}

.source-explore-icon {
    padding-left: 32px;
    padding-top: 5px;
    padding-bottom: 2px;
}

.source-explore-icon-file {
    background: url(svg-file.svg) no-repeat;
}

.source-explore-icon-directory {
    background: url(svg-directory.svg) no-repeat;
}


/* --------------------------------------------------
   Tables
-------------------------------------------------- */

table,
tr,
td,
th {
    text-align: left;
    border-collapse: collapse;
    border: solid 1px var(--border-color);
}

td,
th {
    padding: 8px 5px;
}

th {
    background-color: #f6f7fa;
    font-weight: 600;
}


/* --------------------------------------------------
   Code
-------------------------------------------------- */

code,
pre {
    font-family: ui-monospace, "SFMono-Regular", Consolas,
                 "Liberation Mono", Menlo, monospace;
}

pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: 1em;
    font-size: small
}

code.hljs {
    padding: 3px 5px;
}

.hljs {
    background: var(--code-background-color);
    color: #20242b;
}


/* Comments */

.hljs-comment,
.hljs-quote {
    color: #7b8494;
}


/* Meta */

.hljs-meta,
.hljs-meta .hljs-keyword,
.hljs-meta .hljs-string {
    color: #b42318;
}


/* Keywords / tags */

.hljs-keyword,
.hljs-name,
.hljs-selector-tag,
.hljs-tag {
    color: #234fbb;
}


/* Attributes */

.hljs-attribute,
.hljs-selector-id {
    color: #7a4f01;
}


/* Strings */

.hljs-addition,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-string {
    color: #217a3c;
}


/* Types */

.hljs-doctag,
.hljs-section,
.hljs-type {
    color: #7047a8;
}


/* Variables / symbols */

.hljs-bullet,
.hljs-literal,
.hljs-symbol,
.hljs-template-variable,
.hljs-variable {
    color: #007a78;
}


/* Numbers / deletion */

.hljs-deletion,
.hljs-number {
    color: #b42318;
}


/* Emphasis */

.hljs-emphasis {
    font-style: italic;
}

.hljs-strong {
    font-weight: 700;
}