:root {
    --bg-color: #f1f1f1;
    --text-color: #333;
    --link-color: #0000EE;
    --gray-accent-color: #dedede;
}

body {
    margin: auto;
    padding: 0ch 1ch;
    max-width: 60ch;
    background-color: var(--bg-color);
    color: var(--text-color);
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/fonts/JetBrainsMono[wght].ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/fonts/JetBrainsMono-Italic[wght].ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
}

h1, h2, h3 {
    font-weight: bold;
}

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

#site-navbar,
#site-footer {
    background-color: var(--gray-accent-color);
}
  
#site-navbar > a, 
#site-footer > a {
    text-decoration: underline;
    color: var(--link-color);
}

#site-navbar > a:before, 
#site-footer > a:before {
    display: inline-block;
    content: "[";
}
#site-navbar > a:after, 
#site-footer > a:after {
    display: inline-block;
    content: "]";
}

.section {
    margin: 2ch 0ch;
}