:root {
    color-scheme:                  dark;
    --background:                  light-dark(rgb(212 212 215), rgb(42 42 46));
    --color:                       #1c1c1c;
    --link-background:             #d4d4d4;
    --link-color:                  #435531;
    --header-color:                #9e9e9e;
    --header-height:               27mm;
    --article-background:          #ddd;
    --article-width:               210mm;
    --article-height:              297mm;
    --article-gap:                 3vw;
    --article-margin-top:          15mm;
    --article-margin-left:         25mm;
    --article-margin-right:        20mm;
    --article-margin-bottom:       15mm;
}

article {
    --margin-top:           var(--article-margin-top);
    --margin-left:          var(--article-margin-left);
    --margin-right:         var(--article-margin-right);
    --margin-bottom:        var(--article-margin-bottom);
    --background-image:
        radial-gradient(circle 3mm at 11mm calc((var(--article-height)/2) - 40mm), #d3d3d3 97%, transparent),
        radial-gradient(circle 3mm at 11mm calc((var(--article-height)/2) + 40mm), #d3d3d3 97%, transparent);
}

@container page (width < 209mm) {
    article {
        --margin-top: 7vw;
        --margin-left: auto;
        --margin-right: auto;
        --margin-bottom: 7vw;
        --background-image: unset;
    }
}

@container page (width < 175mm) {
    article {
        --margin-left:       3vw;
        --margin-right:      2vw;
    }
}

@font-face {
  font-family: 'Syne Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./syne-mono.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
    font-family: "Syne Mono", monospace;
    box-sizing: border-box;
}

html {
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--color);
    background-color: var(--background);
}

body {
    container-name: page;
    container-type: inline-size;
    display: grid;
    gap: var(--article-gap);
    max-width: var(--article-width);
    margin: var(--article-gap) auto;
}

a {
    color: var(--link-color);
    text-decoration: none;
    padding: 0 .1rem;
    background: var(--link-background);
    border-radius: 2px;

    &:hover {
        text-decoration: underline dashed;
    }
}

article {
    display: flex;
    flex-direction: column;
    min-height: var(--article-height);
    max-width: var(--article-width);
    background-color: var(--article-background);
    background-image: var(--background-image);
    box-shadow: 
        0 0.25px 0.75px light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)),
        0 2px 6px 0 light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4));

    > *:not(header):not(footer) {
        max-width: calc(var(--article-width) - var(--article-margin-left) - var(--article-margin-right));
        margin: 0 var(--margin-right) 0 var(--margin-left);
    }

    > :first-child:not(header) {
        margin-top: var(--margin-top);
    }

    > :last-child,
    &::after {
        margin-bottom: var(--margin-bottom);
    }

    > header {
        height: var(--header-height);
        display: flex;
        align-items: center;
        justify-content: center;
        
        b {
            letter-spacing: 0.15em;
        }
    }

    > p:first-child {
        font-weight: bold;
        width: -moz-available;
        width: -webkit-fill-available;
    }

    > header,
    > p:first-child {
        a {
            background: unset;
        }
    }

    > header > b::before,
    > p:first-child::before {
        content: "";
        display: inline-block;
        background-image: url(./emojis/neofox_transbian_enjoyer_bot.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 1.4em;
        height: 1.4em;
        margin: -0.4em 0.25em 0;
        vertical-align: middle;
    }

    section {
        h1 {
            font-size: 1.4rem;
            margin: 1.5rem 0 0.5rem;

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

        h2 {
            font-size: 1.3rem;
            margin: 1.5rem 0 -.5rem;
        }

        h3 {
            font-size: 1.1rem;
            margin: 1rem 0 -.5rem;
        }

        p {
            margin: 1rem 0;
        }

        abbr {
            cursor: help;
        }

        ul {
            list-style-type: disclosure-closed;
        }

        dl {
            display: grid;
            grid-template-columns: max-content 1fr;
            gap: 0.2rem 1.5rem;

            dt {
                text-transform: uppercase;
            }

            dd {
                margin: 0;
            }
        }

        pre, code {
            font-size: .9rem;
        }

        pre {
            white-space: pre-line;
        }

        .queer {
            padding: 0 .1rem;
            display: inline-block;
            transform: rotateY(180deg);
            background-image: linear-gradient(
                180deg,
                #5bcffa calc(100%/5*1),
                #f5abb9 calc(100%/5*1) calc(100%/5*2),
                #f2f2f2 calc(100%/5*2) calc(100%/5*3),
                #f5abb9 calc(100%/5*3) calc(100%/5*4),
                #5bcffa calc(100%/4*1)
            );
        }

        .avatar {
            float: right;
            max-width: 40mm;
            margin: .5rem 0 .25rem .25rem;
            border-radius: 5%;
        }

        #domains {
            margin: -.7rem 0 0 0;
            padding-left: 1.75rem;
            list-style-type: "-> ";
        }
    }

    header + section { 
        h1:first-child {
            margin-top: 0;        
        }
    }

    footer,
    &::after {
        text-align: center;
        margin-top: auto;

        > * {
            margin-top: 1rem; 
        }

        a {
            font-size: 0.85rem;
        }
    }
}

body:has(> article:nth-child(2)) {
    article {
        counter-increment: pagenum;

        &::after {
            display: block;
            content: "— " counter(pagenum) " —";
        }

        &:has(footer)::after {
            margin-top: unset;
        }
        > :last-child {
            margin-bottom: unset;
        }
    }
}

.emoji {
  width: 1.4em;
  height: 1.4em;
  margin: -0.2em 0.02em 0;
  object-fit: contain;
  vertical-align: middle;
}

.badges,
.flags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.badges {
    gap: 5px;
    max-width: calc((5px * 4) + (88px * 5));

    img {
        image-rendering: pixelated;
    }
}

.flags {
    gap: 2rem;

    > div {
        width: 100px;
        height: 10px;
        border-radius: 3px;
    }

    .disability {
        background: linear-gradient(
            90deg,
            #5a5a5a calc(100%/7*1),
            #f17e7e calc(100%/7*1) calc(100%/7*2),
            #f8e17f calc(100%/7*2) calc(100%/7*3),
            #f2f2f2 calc(100%/7*3) calc(100%/7*4),
            #a1d0ff calc(100%/7*4) calc(100%/7*5),
            #65b567 calc(100%/7*5) calc(100%/7*6),
            #5a5a5a calc(100%/7*6)
        );        
    }

    .trans {
        background: linear-gradient(
            90deg,
            #5bcffa calc(100%/5*1),
            #f5abb9 calc(100%/5*1) calc(100%/5*2),
            #f2f2f2 calc(100%/5*2) calc(100%/5*3),
            #f5abb9 calc(100%/5*3) calc(100%/5*4),
            #5bcffa calc(100%/4*1)
        );
    }

    .sapphic {
        background: linear-gradient(
            90deg,
            #ba70f8 calc(100%/4*1),
            #f8708c calc(100%/4*1) calc(100%/4*2),
            #f7db64 calc(100%/4*2) calc(100%/4*3),
            #77b961 calc(100%/4*3)
        );
    }

}

@media print {
    html {
        background-color: white;
    }

    body {
        print-color-adjust: exact !important;
        margin: 0 auto;
    }

    a, article {
        background: none;
    }

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

    article {
        box-shadow: none;
        break-after: page;

        > :first-child {
            a {
                text-decoration: none;
            }
        }

        section {
            abbr {
                text-decoration: none;

                &::after{
                  content: " (" attr(title) ") ";
                  font-size: small;
                }
            }
        }

        footer {
            margin-top: auto;
        }
    }

    .flags {
        display: none !important;
    }

    @page {
        size: A4;
        margin: 0;
    }
}