:root {
    --colour-primary-back: #383838;
    --colour-primary-fore: #F0F0F0;
    --colour-secondary-back: linear-gradient(315, #00FFAA, #AAFFAA);
    --colour-secondary-fore: #000000;
    --colour-tertiary-back: #FF0000;
    --colour-tertiary-fore: #FFFFFF;
/*
* Created with https://www.css-gradient.com
* Gradient link: https://www.css-gradient.com/?c1=ea9c5c&c2=466aaa&gt=l&gd=dtl
*/
    --colour-code-back: #242424;
    --colour-code-fore: var(--colour-primary-fore);

    --colour-code-operator: #AACCFF;
    --colour-code-keyword: #00AAFF;
    --colour-code-type: #AAAAFF;
    --colour-code-string: #AAFFAA;
    --colour-code-number: #FFAA00;

    --colour-button-back-default: var(--colour-secondary-back);
    --colour-button-fore-default: var(--colour-secondary-fore);
    --colour-button-back-hover: var(--colour-primary-back);
    --colour-button-fore-hover: var(--colour-primary-fore);
    --colour-button-back-active: var(--colour-tertiary-back);
    --colour-button-fore-active: var(--colour-tertiary-fore);

    --font-default: sans-serif, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana;
    --font-code-default: monospace, 'Courier New', Courier;

    --font-code-size: 1rem;

    --spacing-extremely-small: 0.1rem;
    --spacing-small: 0.25rem;
    --spacing-medium: 0.5rem;
    --spacing-large: 1rem;
    --spacing-text: 2.5rem;

    --border-article-default: var(--spacing-medium) solid var(--colour-primary-back);
    --border-footer: var(--spacing-medium) solid var(--colour-primary-back);
    --border-code-default: var(--spacing-medium) solid var(--colour-code-back);

    --border-button-default: var(--spacing-small) solid;
    --border-button-back-default: var(--colour-button-back-default);
    --border-button-back-hover:   var(--colour-button-back-hover);
    --border-button-back-active:  var(--colour-button-back-active);

    --border-column-default: var(--spacing-extremely-small) solid var(--colour-primary-fore);

    --border-radius-large: 1.5rem;
    --border-radius-medium: 1rem;
    --border-radius-small: 0.5rem;

    --icon-foldable-visible: '- ';
    --icon-foldable-invisible: '+ ';
}

* {
    font-size: 1.5rem;
    font-family: var(--font-default);
    
    width: 100%;
    box-sizing: border-box;

    margin: 0;
    border: none;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bolder;
}

h1, h1 > * { font-size: 3.5rem; }
h2, h2 > * { font-size: 2.2rem; }
h3, h3 > * { font-size: 1.7rem; }
h4, h4 > * { font-size: 1.5rem; }
h5, h5 > * { font-size: 1.25rem; }
h6, h6 > * { font-size: 1rem; } 

p {
    line-height: var(--spacing-text);
}
p + :not(p) {
    margin-top: var(--spacing-large);
}

/******************************************************************/

body {
    display: grid;
    align-items: stretch;
    justify-items: stretch;
    place-items: center;
    grid-template-columns: 1;

    color: #FFF;
    background: #000;
}

code {
    margin: var(--spacing-large) 0;
    padding: var(--spacing-medium);

    display: block;
    width: 100%; 
    font-size: var(--font-code-size) !important;
    font-family: var(--font-code-default);
    background: var(--colour-code-back);
    color: var(--colour-code-fore);
    border: var(--border-code-default);
    border-radius: var(--border-radius-medium);

    text-wrap: nowrap;
    overflow-x: auto;
}

code .operator { color: var(--colour-code-operator); }
code .keyword { color: var(--colour-code-keyword); }
code .type { color: var(--colour-code-type); }
code .string{ color: var(--colour-code-string); }
code .number { color: var(--colour-code-number); }

code[hidden] { display: none; }




[foldable] {
    cursor: pointer;
}

[foldable]:not(li)::before {
    content: var(--icon-foldable-visible);
    margin-right: var(--spacing-small);
    vertical-align: middle;
}

[foldable]:not(li):has(+ [hidden])::before {
    content: var(--icon-foldable-invisible);
}

li[foldable] {
    list-style-type: disclosure-open;
}
li[foldable]:has(+ [hidden]) {
    list-style-type: disclosure-closed;
}


/******************************************************************/

header, footer {
    display: flex;
    background: var(--colour-primary-back);
    padding: 0rem var(--spacing-large);
}

header { 
    top: 0; 
    position: sticky; 
}
footer { 
    border-top: var(--border-footer);
    border-radius: var(--border-radius-large);
    padding: var(--spacing-medium);
    bottom: 0; 
}

.flex-group {
    display: flex;
    width: 100%;
    gap: var(--spacing-large);
}
.flex-group[hidden] {
    display: none;
}

article .flex-group {
    flex-wrap: wrap;
}

article .flex-group * {
    flex: 1;
    overflow-wrap: break-word;
    hyphens: auto;

    width: auto;
    min-width: 0;
}

article .flex-group div {
    padding: var(--spacing-medium);
    border-left: var(--border-column-default);
    border-right: var(--border-column-default);
}

header div.flex-group {
    gap: var(--spacing-small);
}

header div.flex-group * {
    width: 100%;
}

article {
    margin: var(--spacing-large);
    border: var(--border-article-default);
    border-radius: var(--border-radius-large);
    padding: var(--spacing-large);

    background: var(--colour-primary-back);
    color: var(--colour-primary-fore);

    width: 75%;
}

ul, ol {
    margin-left: var(--spacing-large);
    list-style-position: inside;
}

/******************************************************************/

table {
    border: 1rem solid black;
    border-collapse: collapse;
}

th, td {
    border: 0.5rem solid black;
    padding: var(--spacing-medium)
}

table thead tr th {
    background: var(--colour-secondary-back);
    color: var(--colour-secondary-fore);
}

table tbody tr td {
    background: var(--colour-primary-back);
    color: var(--colour-primary-fore);
}

table tfoot tr td {

}

/******************************************************************/

button {
    background: var(--colour-button-back-default);
    color: var(--colour-button-fore-default);

    border: var(--border-button-default);
    border-image: var(--border-button-back-default);

    border-radius: var(--border-radius-small);
    padding: 0.25rem 1rem;

    font-weight: bold;
}
button:hover  { 
    background: var(--colour-button-back-hover);
    color: var(--colour-button-fore-hover);
    border-image: var(--border-button-back-hover);
}
button:active { 
    background: var(--colour-button-back-active);
    color: var(--colour-button-fore-active);
    border-image: var(--border-button-back-active);
}

a:link, a:visited { 
    color: var(--colour-button-back-default); 
}
a:hover { 
    color: var(--colour-button-fore-hover); 
}
a:active { 
    color: var(--colour-button-back-active); 
}