@font-face {
    font-family: FiraCode;
    src: url("assets/fonts/FiraCode-Regular.woff2");
}

@font-face {
  font-family: 'Fira Code VF';
  src: url('assets/fonts/FiraCode-VF.woff2') format('woff2-variations'),
       url('assets/fonts/FiraCode-VF.woff') format('woff-variations');
  /* font-weight requires a range: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide#Using_a_variable_font_font-face_changes */
  font-weight: 300 700;
  font-style: normal;
}

:root {
    --bg:           #282828;
    --fg:           #ebdbb2;
    --dark-gray:    #928374;        /* comments */
    --gray:         #a89984;        /* variables */
    --dark-red:     #cc241d;
    --red:          #fb4934;        /* types */
    --dark-orange:  #d65d0e;
    --orange:       #fe8019;        /* keywords */
    --dark-yellow:  #d79921;
    --yellow:       #fabd2f;
    --dark-green:   #98971a;        /* strings */
    --green:        #b7bb26;
    --dark-aqua:    #689d6a;        /* punctuation */
    --aqua:         #8ec07c;
    --dark-blue:    #458588;        /* annotations */
    --blue:         #83a598;        /* numbers */
    --dark-purple:  #b16286;        /* functions */
    --purple:       #d3869b;

    --code-bg:      #504945;
    --code-fg:      #d5c4a1;

    --comments:         var(--dark-gray);
    --types:            var(--yellow);
    --keywords:         var(--red);
    --strings:          var(--green);
    --punctuation:      var(--purple);
    --annotations:      var(--dark-purple);
    --inner-annotations:var(--yellow);
    --numbers:          var(--blue);
    --functions:        var(--aqua);
    --variables:        var(--gray);
    
}

html * {
    font-family: FiraCode, monospace;
    background-color: var(--bg);
    color: var(--fg);
    text-align: center;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
html::-webkit-scrollbar {
    display: none;
}

body {
    padding-left: 15%;
    padding-right: 15%;
}

hr {
    border-color: var(--code-fg);
    background-color: var(--code-fg);
    height: 1px;
}

code {
    background-color: var(--code-bg);
    color: var(--code-fg);
    text-align: left;
    font-feature-settings: "calt" 1;
    text-rendering: optimizeLegibility;
    overflow: auto;
    padding: 20px;
    border-radius: 15px;
    display: block;
    white-space: pre-wrap;
}

@supports (font-variation-settings: normal) {
    code {
        font-family: 'Fira Code VF', monospace;
    }
}

code * {
    background-color: transparent;
    text-align: left;
    font-family: 'Fira Code VF', monospace;
    font-feature-settings: "calt" 1;
    text-rendering: optimizeLegibility;
}

.light {
    font-weight: 300;
}

.medium {
    font-weight: 500;
}

.bold {
    font-weight: 700;
}

navheader {
    text-decoration: none;
    display: flex;
}

navheader div {
    text-decoration: none;
    background-color: var(--code-bg);
    border-radius: 15px;
    flex: 1;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

navheader a {
    float: left;
    color: var(--code-fg);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    font-family: FiraCode, monospace;
    background-color: transparent;
    border: 1px solid var(--code-bg);
    border-radius: 15px;
}

navheader a:hover {
    text-decoration: none;
    background-color: var(--bg);
    color: var(--fg);
}

in_progress {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}