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

    --block: #22222275;
    --block2: #44444473;
    --header: #ffffff15;
    --border: #ffffff21;

    /*specifications*/
    --font-size: 13pt;
    --line-height: 20px;
    --body-padding: 1em;
    --p-padding: .5em 0em .5em 0em;
}

body {
    background: var(--base-colour) url(/!assets/basicbg.webp) fixed;
    background-position: center; background-size: cover;
    color: var(--text-colour);
}

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

#wrapper {width:  var(--wrapper-width)}

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

.text-sm {font-size: 10pt;}

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

ul {
    margin: 0;
    padding-top: .5em;
    padding-bottom: .5em
}

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

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

hr {
    margin: .5em;
    border-top: none;
    border-bottom: 1px solid var(--border);
}

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

section {
    margin-top: 1em;
    width:  inherit;
}

.subsection {
    margin-bottom: 1em;
}

.block {
    background: var(--block); padding: 1em; border: 1px solid var(--border); border-radius: .1em;
    backdrop-filter: blur(10px);
}

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

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