:root {
    --colour-primary-back: linear-gradient(315deg, #383838EC, #454545EC);
    --colour-primary-fore: #F0F0F0;
    --colour-secondary-back: linear-gradient(315deg, #00FFAA, #AAFFAA);
    --colour-secondary-fore: #000000;
    --colour-tertiary-back: linear-gradient(315deg, #AA00FF, #AAAAFF);
    --colour-tertiary-fore: #FFFFFF;
    
    --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-code-comment: var(--colour-primary-back);

    --anim-button-throb-scale-max: 1.0;
    --anim-button-throb-scale-min: 0.95;

    --anim-button-name-default: BtnAnimIdle;
    --anim-button-speed-default: 16s;
    --anim-button-type-default: ease;
    --anim-button-time-default: infinite;
    --anim-button: var(--anim-button-name-default) 
                               var(--anim-button-speed-default)
                               var(--anim-button-type-default)
                               var(--anim-button-time-default);

    --anim-button-name-hover: BtnAnimHover;
    --anim-button-speed-hover: 5s;
    --anim-button-hover: var(--anim-button-name-hover) 
                                     var(--anim-button-speed-hover)
                                     var(--anim-button-type-default)
                                     var(--anim-button-time-default);

    --anim-button-name-active: BtnAnimAction;
    --anim-button-speed-active: 3s;
    --anim-button-active: var(--anim-button-name-active) 
                                      var(--anim-button-speed-active)
                                      var(--anim-button-type-default)
                                      var(--anim-button-time-default);

    --colour-button-back-default: linear-gradient(315deg, #757575, #A0A0A0);
    --colour-button-fore-default: #303030;
    --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;

    --footer-max-size: 3.3rem;

    --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;
    margin-top: var(--spacing-large);
}

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 {
    margin-bottom: var(--footer-max-size);

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

    color: #FFF;
}

.background {
    background-image: url('../img/background.jpg');
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;

    width: 100%;
    height: 100%;

    top: 0;
    left: 0;
    position: fixed;
    z-index: -999;
}

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) !important;
    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 .comment { 
    color: var(--colour-code-comment); 
    font-style: italic;
}

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: var(--border-footer);
    border-bottom: none;
    border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
    padding: var(--spacing-medium);

    bottom: 0; 
    max-height: var(--footer-max-size);
    position: fixed;
}

.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 1 12rem;
    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 {
    color: var(--colour-button-fore-default);
    background-image: var(--colour-button-back-default);
    background-size: 200% 200%;

    -webkit-animation: var(--anim-button);
    -moz-animation: var(--anim-button);
    -o-animation: var(--anim-button);
    animation: var(--anim-button);

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

    border-radius: var(--border-radius-small);
    padding: var(--spacing-small) var(--spacing-large);

    font-weight: bold; 
}
button:hover  { 
    color: var(--colour-button-fore-hover);

    background-image: var(--colour-button-back-hover);
    -webkit-animation: var(--anim-button-hover);
    -moz-animation: var(--anim-button-hover);
    -o-animation: var(--anim-button-hover);
    animation: var(--anim-button-hover);

    /*border-image: var(--border-button-back-hover);*/
}
button:active { 
    color: var(--colour-button-fore-active);

    background-image: var(--colour-button-back-active);
    -webkit-animation: var(--anim-button-active);
    -moz-animation: var(--anim-button-active);
    -o-animation: var(--anim-button-active);
    animation: var(--anim-button-active);
    
    /*border-image: var(--border-button-back-active);*/
}

@keyframes BtnAnimIdle {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes BtnAnimHover {
    0%   {  background-position: 0% 0%;    }
    25%  { background-position: 100% 0%;   }
    50%  { background-position: 100% 100%; }
    75%  { background-position: 0% 100%;   }
    100% { background-position: 0% 0%;     }
}

@keyframes BtnAnimAction {
    0% {
        background-position: 50% 50%;
        transform: scale(var(--anim-button-throb-scale-max));
    }
    50% {
        background-position: 100% 50%;
        transform: scale(var(--anim-button-throb-scale-min));
    }
    100% {
        background-position: 50% 50%;
        transform: scale(var(--anim-button-throb-scale-max));
    }
}

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); 
}