:root {
    /* DEFAULT VALUES CAN BE OVERWRITTEN IN THE INDIVIDUAL CSS FILE*/

    /* colors */
    --base-colour: #171717;
    --text-colour: #b6b6b6;
    --text-bold: #e2e2e2;
    --text-header: #e2e2e2;
    --muted: #6e6b6bd7;
    --accent: #baff1b;

    --block: #22222275;
    --block2: #44444473;
    --header: #ffffff15;
    
    /* border */
    --border: 1px solid #ffffff21;
    
    /* fonts */
    --font-family: "IBM-DOS", monospace;
    --font-size: 13pt;
    --font-size-sm: 10pt;
    --line-height: 20px;

    --header-font: "04B_09", monospace;
    --header-font-size: 13pt;
    --header-line-height: 20px;

    --jp-font: "DotGothic16";
    --jp-font-size: 13pt;
    --jp-font-sm: 10pt;
    --jp-line-height: 25px;

    --jp-header-font: var(--jp-font);
    --jp-header-font-size: 13pt;
    --jp-header-line-height: 25px;
    
    /* padding */
    --p-padding: .5em 0em .5em 0em;
 
    /* background image*/
    --bg-img: none;
    --bg-position: center;
    --bg-size: cover;
    --bg-repeat: no-repeat;
    
    /* body */
    --overflow: auto;
    --overflow-x: auto;
    --overflow-y: auto;

    --body-width: auto;
    --body-height: auto;
    --body-padding: 1em;
    
    /* wrapper */
    --wrapper-width: auto;
    --wrapper-height: auto;
    --wrapper-min-height: auto;
    --wrapper-padding: none;

    /* lists */
    --list-style-type: "> ";
    
    /* misc */
    --gap: .5em;
    --section-gap: .5em;
    --radius: none;
    --image-rendering: crisp-edges;
} 

body {
    background-color: var(--base-colour);
    background-image: var(--bg-img);
    background-position: var(--bg-position); 
    background-size: var(--bg-size);
    background-repeat: var(--bg-repeat);
    color: var(--text-colour);
    font-family: var(--font-family);
    font-size: var(--font-size);
    padding: var(--body-padding);
    line-height: var(--line-height);
    image-rendering: var(--image-rendering);
    overflow: var(--overflow);
    overflow-x: var(--overflow-x);
    overflow-y: var(--overflow-y);
    width: var(--body-width);
    height: var(--body-height);
}

.bodycenter {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#wrapper {width:  var(--wrapper-width); height: var(--wrapper-height); min-height: var(--wrapper-min-height); padding: var(--wrapper-padding);}

.muted {color: var(--muted);}

.text-sm { var(--font-size-sm); }

a, .highlight { color: var(--accent); }

b { color: var(--text-bold); }

ul {
  list-style-type: var(--list-style-type);
}

.chunk {
    padding-top:  1em;
    padding-bottom: 1em;
}

.sublist {
    padding: 2px 7px 15px 30px;
}

h1, h2, h3, h4, .header {
    color: var(--text-header);
    background-color: var(--header);
    padding: .5em .2em .5em .2em;
    border-radius: var(--radius);
    font-family: var(--header-font);
    line-height: var(--header-line-height);
}

.header {
  font-size: var(--header-font-size);
  }

section:last-child {
    margin-top: var(--section-gap);
}

.block {
    background: var(--block); padding: 1em; border: var(--border); border-radius: var(--radius);
}

button {
    border: none;
    cursor: pointer;
    background: var(--block2);
    color: var(--text-colour);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

button:hover {
    filter: brightness(70%);
}

hr {
  border: var(--border);
}

.jp-txt {
  font-family: var(--jp-font) !important;
  font-size: var(--jp-font-size) !important;
  line-height: var(--jp-line-height) !important;
}

.jp-header-txt {
  font-family: var(--jp-header-font) !important;
  font-size: var(--jp-header-font-size) !important;
  line-height: var(--jp-header-line-height) !important;
}