:root
{
    --main-colour: #109c52;
    --accent-colour: #0094c6;

    --base-colour-light: #e1e1e1;
    --dim-colour-light: #d4d4d4;
    --base-colour-dark: #121212;
    --dim-colour-dark: #1e1e1e;

    --base-colour-foreground: var(--base-colour-light);
    --dim-colour-foreground: var(--dim-colour-light);
    --base-colour-background: var(--base-colour-dark);
    --dim-colour-background: var(--dim-colour-dark);

    --main-padding: 3em;
    --p-padding: 2em;

    --narrow-width: 800px;

    font-family: "DejaVu Sans", "Libertinus Serif", serif;
    --font-sans: "DejaVu Sans", "Libertinus Sans", sans-serif;
    font-size: 17px;
    line-height: 1.5em;
}

@media (prefers-color-scheme: light)
{
    :root
    {
        --base-colour-foreground: var(--base-colour-dark);
        --dim-colour-foreground: var(--dim-colour-dark);
        --base-colour-background: var(--base-colour-light);
        --dim-colour-background: var(--dim-colour-light);
    }
  }
}

@media (max-device-width: 1700px)
{
    :root
    {
        --main-padding: 2em;
    }
}

@media (max-device-width: 1000px)
{
    :root
    {
        --main-padding: 0.5em;
        --p-padding: 0.5em;
        font-size: 25px;
    }

    header > hgroup
    {
        font-size: 20px;
    }
}

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    background-repeat: no-repeat;

    transition-property: none;
    transition-duration: 1s;
    transition-timing-function: ease-in-out;
}

a img
{
    border: none;
}

a:any-link
{
    color: inherit;
    text-decoration: none;
}

:is(p, ul, ol, dl) a:any-link
{
    border-bottom: 0.15em solid var(--accent-colour);
}

:is(p, ul, ol, dl) a:hover
{
    background: var(--accent-colour);
}

sup.footnote-reference > a:any-link
{
    color: var(--accent-colour);
    border-bottom: 0.1em solid var(--accent-colour);
}

sup.footnote-reference > a:hover
{
    color: inherit;
    border-bottom: 0.1em solid var(--accent-colour);
}

:is(h1, h2, hgroup) a:any-link
{
    border-bottom: 0.1em dotted;
}

:is(h1, h2, hgroup) a.anchor:any-link
{
    border-bottom: none;
}

a:any-link:has(> :is(picture, img):only-child),
a:hover:has(> :is(picture, img):only-child)
{
    border-bottom: none;
    background: none;
}

header h1 a:any-link
{
    border-bottom: 0.1em none;
}

:is(h1, h2, hgroup) a:hover
{
    border-bottom: solid;
}

picture > *
{
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}

body
{
    display: flex;
    flex-direction: column;

    color: var(--base-colour-foreground);
    background: var(--base-colour-background);
}

header
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    font-family: var(--font-sans);
    color: var(--base-colour-light);
    color: white;
    background: var(--main-colour);
}

header > *
{
    flex: 0 0 content;
}

header > h1
{
    padding: 0.2em 0.5em 0;
}

header > h1 img
{
    max-height: 1.5em;
}

#menu
{
    display: flex;
    width: 100%;
    font-family: var(--font-sans);
}


#menu > a
{
    padding: 1.3em;
}

#menu > a.current
{
    background: var(--accent-colour);
    border-top: 0.1rem solid var(--base-colour-background);
}

#menu > a:hover
{
    color: var(--base-colour-background);
    background: var(--accent-colour);
}

hgroup
{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: calc(var(--p-padding) / 2) calc(var(--main-padding) / 2 + 1em);
    text-align: center;

    font-family: var(--font-sans);
    color: var(--accent-colour);
    background: val(--base-colour);
}

hgroup > :is(h1, p)
{
    flex: auto;
    align-self: baseline;
    text-align: left;
}

hgroup > p
{
    text-align: right;
    font-size: 1.5em;
    font-weight: bold;
}

#content
{
    display: flex;
    flex-wrap: wrap;
    order: 50;
    max-width: 1300px;

    margin: 0 auto;
    padding: var(--main-padding);
    background: var(--dim-colour-background);
}


main
{
    flex: 3 1 50%;
    order: 50;

    padding: 0 var(--main-padding);
}

#content > aside
{
    flex: 1 1 20%;
    padding: 0 0.5em;
}

/*
.sidebar + main
{
    grid-column: 1 / 3;
}

.sidebar + .sidebar + main
{
    grid-column: 2 / 3;
}
*/

:is(main, section) > h1,
:is(main, section) > hgroup > h1
{
    margin: 1em calc(-1 * var(--main-padding) / 3) 0;
    padding: 10px;
    border-bottom: 1px solid var(--accent-colour);
    font-size: 1.5em;
}

section > section > h1,
section > section > hgroup > h1
{
    border-bottom-style: dotted;
    font-size: 1.25em;
}

main :is(p, details > summary)
{
    padding: 0 var(--p-padding);
}

main :is(ul, ol, dl)
{
    padding: 0 var(--p-padding) 0 calc(1.5 * var(--p-padding));
}

main :is(h1, h2, h3, h4, p, ul, ol, dl, details > summary)
{
    margin-top: 1em;
}

main div.footnote-definition:first-of-type
{
    margin-top: 2em;
    border-top: 0.1em solid var(--accent-colour);
}

main div.footnote-definition
{
    padding: 0.5em calc(1.5 * var(--p-padding));
    font-size: 0.8em;
}

main div.footnote-definition > p
{
    display: inline;
    margin: 0;
    padding: 0;
}

main a.anchor
{
    margin-left: 1em;
    padding: 0.1em;
    font-size: 0.5em;
    vertical-align: middle;
    opacity: 0.5;
}

main a.anchor:hover
{
    opacity: 1;
}

main .no-anchor > a.anchor
{
    display: none;
}

main :target > a.anchor
{
    opacity: 1;
/*
    border-radius: 100%;
    background: var(--accent-colour);
*/
    border-right: 2px solid var(--accent-colour);
}

main section > section
{
    margin-left: var(--main-padding);
}

p.licence
{
    text-align: right;
}

footer
{
    display: flex;
    order: 100;
    padding: 3em 2em 0;
}

footer > .copyright
{
    flex: 1;
}

footer picture
{
    display: inline-block;
    vertical-align: middle;
    height: 3em;
    margin: 0 1em;
}

/* Home page special stuff */
.homepage-insert
{
    display: flex;
    margin-bottom: 2em;
    padding: 0 0 2em;
    border-bottom: 2px solid var(--accent-colour);
    font-size: 1.2em;
    gap: 1em;
}

.homepage-insert > aside
{
    text-align: center;
}

.homepage-insert > aside > img
{
    display: block;
    margin: 0.5em auto;
}

/* Sidebars ordering */
#content > aside
{
    order: 25;
}

#content > main ~ aside
{
    order: 75;
}


/* Page sidebar illustration */
body.page aside > .illustration
{
    flex: auto;
    order: 25;
    margin: 0 auto;
    display: block;
    max-width: 100%;
}

/* Common taxonomies */

dl.taxonomies > div
{
    display: flex;
    flex-wrap: wrap;
    gap: 0.2em;
}

/* Page sidebar taxonomies */
body.page aside > dl.taxonomies
{
    order: 75;
}

body.page aside > dl.taxonomies a:any-link
{
    color: inherit;
}

body.page aside > dl.taxonomies :is(a:any-link:hover, dd)
{
}

body.page aside > dl.taxonomies dt
{
    flex: 1 1 100%;
    margin: 0.5em 0 0.2em;
}

body.page aside > dl.taxonomies dd
{
    margin: 0 0.3em;
}

/* Section and Taxonomies pages listing */
body:is(.section, .taxonomies) article > dl.taxonomies
{
    display: flex;
    flex-wrap: wrap;
    gap: 0.2em;
    padding: 0.5em calc(var(--main-padding) + 1em);
}

body:is(.section, .taxonomies) article > dl.taxonomies > div
{
    flex: auto;
}

body:is(.section, .taxonomies) article > dl.taxonomies :is(dt, dd)
{
}

body:is(.section, .taxonomies) article > dl.taxonomies dd
{
    padding: 0.1em 0.3em;
    border-radius: 0.2em;
    font-size: 0.9em;
/*
    background: var(--accent-colour);
*/
}

body:is(.section, .taxonomies) article > dl.taxonomies dd > a:any-link
{
/*
    color: var(--base-colour-foreground);
*/
}

/* Page sidebar */
body.page aside > p
{
    margin: 1em 0;
}

/* Pages lists */
section > .list
{
    display: flex;
    flex-wrap: wrap;
    gap: 3em;
}

section > .list > article
{
    flex: 1 500px;
}

section > .list > article h1 .recommendation
{
    margin: 0 0.5em;
    font-size: 0.75em;
    vertical-align: middle;
}

section > .list > article .illustration
{
    display: block;
    float: right;
    width: 200px;
    margin: 1em 0 0 1em;
}

.spoiler summary
{
    cursor: pointer;
}
.spoiler .content
{
    display: block;
    content: attr(data-content);
    margin-top: 1em;
    margin: 0 calc(-1 * var(--p-padding));
    filter: blur(4px);
}

.spoiler[open] .content
{
    display: none;
}

.feeds
{
    display: block;
    text-align: right;
}

.feed > img
{
    display: inline-block;
    max-width: 1em;
    max-height: 1em;
    margin-right: 0.25em;
    vertical-align: middle;
}

.irc-log
{
    margin-top: 1em;
    padding-left: 3em;
}

.irc-log > .irc-header > .irc-time
{
    display: inline-block;
    margin-right: 2em;
}

.irc-log > p
{
    margin: 0;
}

.log-extract
{
    position: relative;
    padding-left: 6em;
}

.log-extract::before
{
    content: "«»";
    position: absolute;
    left: 0;
    opacity: 0.4;
    font-size: 6em;
    color: var(--accent-colour);
}

/*
 * Specify narrow layout
 */

@media (max-device-width: 800px)
{

header
{
    order: 60;
    flex-direction: column;
}

#menu
{
    flex-direction: column;
}

#menu > :first-child
{
    display: none;
}

#content
{
    display: flex;
    flex-direction: column;
}

.unflex-narrow
{
    display: contents;
}

main
{
    flex: auto;
    order: 50;

    padding: 0 var(--main-padding);
}

#content > aside
{
    flex: auto;
    padding: 0 0.5em;
}

section > .list > article .illustration
{
    float: none;
}

}