html {

    /* color scheme - gruvbox */
    --black-normal:   #282828;
    --black-bright:   #3c3836;
    --red-normal:     #cc241d;
    --red-bright:     #fb4934;
    --green-normal:   #98971a;
    --green-bright:   #b8bb26;
    --yellow-normal:  #d79921;
    --yellow-bright:  #fabd2f;
    --blue-normal:    #458588;
    --blue-bright:    #83a598;
    --magenta-normal: #b16286;
    --magenta-bright: #d3869b;
    --cyan-normal:    #689d6a;
    --cyan-bright:    #8ec07c;
    --white-normal:   #a89984;
    --white-bright:   #ebdbb2;

    --bg-dark:  var(--black-normal);
    --bg-light: var(--black-bright);
    --text-dark: var(--white-normal);
    --text-light: var(--white-bright);
    
    color: var(--text-dark);
    background-color: var(--bg-dark);
    font-family: 'Courier New', monospace;
}

body {
    padding: 0;
    margin: 0;
    height: 100%;
    
    background-color: var(--bg-dark);
}
body::-webkit-scrollbar {
    width: 0.25rem;
}
body::-webkit-scrollbar-track {
    display: none;
}
body::-webkit-scrollbar-thumb {
    background: var(--text-dark);
    border-radius: 1rem;
}

nav {
    background-color: var(--bg-light);
    padding: 1rem;
    text-align: right;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-light);
}

a {
    color: var(--text-light);
    transition: color 0.2s;
}
a:hover {
    color: var(--text-dark);
}

strong {
    color: var(--text-light);
}

pre {
    background-color: var(--bg-light);
    padding: 0.75rem;
}
code {
    color: var(--text-light);
    background-color: var(--bg-light);
}

hr {
    border: 1px solid var(--text-light);
}

.back-button {
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.2s;
}
.back-button:hover {
    color: var(--text-light);
}