body{
        align-items:center;
        background-color:var(--bg);
        color:var(--fg);
        font-family:var(--main-font);
    }


    a{
        color:var(--alt-fg);
        text-decoration:none;
    }
    a.url::before{
        content:'-> ';
    }
    p.right{
        text-align: right;
    }
    p, li{
        margin-bottom:0.5em;
    }

    header *:focus,
    nav#menu *:focus,
    header a:hover,
    nav#menu a:hover,
    a.big:focus,
    a.big:hover{
        outline:solid 2px var(--alt-fg);
        border-radius:0.15em;
    }
    header *:focus:hover,
    nav#menu *:focus:hover{
        outline-color:var(--acc-fg);
    }

    main a:focus,
    main a:hover{
        text-decoration:underline;
        outline:none;
        text-underline-offset:.3em;
        text-decoration-thickness:.15em;
    }

    header{
        align-items:center;
        justify-content:space-between;
        flex-wrap:wrap;
        padding:0.5em;
        width:50em;
        max-width:90vw;
    }
    nav#menu{
        justify-content:center;
        width:100vw;
        border:dashed var(--fg);
        border-width:.15em 0;
        
    }
    nav#menu>a{
        margin:0.5em 1em;
        padding:0 1em;
    }

    nav#menu div#language_select {
        position:absolute;
        top:1em;
        right:5vw;
    }
    nav#menu div#language_select input {
        display:none;
    }
    nav#menu div#language_select a{
        font-family:var(--sans-serif);
        font-size:.9em;
        padding:.15em;
        border-radius:.2em;
        width:1.8em;
        display:inline-block;
        text-align:center;
        color:var(--fg);
    }
    nav#menu div#language_select a.selected:hover{
        outline:none;
        cursor:default;
    }
    nav#menu div#language_select a:focus,
    nav#menu div#language_select a:not(.selected):hover{
        outline:none;
        text-decoration:underline;
        text-decoration-thickness:.15em;
        text-underline-offset:.2em;
    }
    nav#menu div#language_select:focus-within,
    nav#menu div#language_select:hover{
        outline:solid 2px var(--fg);
        border-radius:0.15em;
    }
    nav#menu div#language_select a.selected{
        background-color:var(--fg);
        color:var(--bg) !important;
    }

    h1{
        font-size:2em;
        color:var(--fg);
        padding:0 .2em;
        margin:.15em;
    }
    a:has(h1):focus, a:has(h1):hover{
        outline-color:var(--fg);
    }
    /* h1:hover,
    nav#menu form#language_select label:hover{
        --fg:var(--acc-fg);
    } */


    .dbart span.db {
        letter-spacing:-10%;
        background-color:var(--fg);
        color:var(--bg);
        padding:0 .25em 0 .1em;
        display:inline-block;
        font-weight:500;
    }
    h1 small{
        letter-spacing:-5%;
        white-space:nowrap;
        font-size:.9rem;
    }
    .dbart span.db:first-letter{
        font-size:.93em;
    }
    .dbart span.art {
        padding-left:.15em;
        letter-spacing:-10%;
        border-bottom:solid .15em var(--fg);
        font-size:.97em;
    }


    main{
        font-family:'Inter', sans-serif;
        font-size:0.95em;
        padding:1em;
        max-width:min(90vw, 56em);
        flex-grow:2;
        /* align-items:center; */
        justify-content:center;
    }

    div.content{
        flex-direction:column;
        padding-bottom:5em;
        min-width:20em;
    }

    p.center{
        text-align:center;
    }

    h3{
        font-size:1.3em;
        font-family:'Fira Code', monospace;
        letter-spacing:-10%;
        background-color:var(--acc-bg);
        color:var(--acc-fg);
        width:fit-content;
        padding:0 0.5em;
        border-radius:.3em;
        margin:.5em 0 .5em -.5em;
    }

    ul li::before{
        content:'=>';
        color:var(--dim-fg);
        margin-left:-1.2em;
        margin-right:0.3em;
    }
    ul li{
        margin-left:1.5em;
    }

    main h2:first-child{
        margin-top:0;
    }

    h2{
        font-size:1.3em;
        font-weight:600;
        border-bottom:solid 1px var(--fg);
        margin:1em 0 .3em -.1em;
    }



    code{
        margin-bottom:.5em;
        padding:.5em;
        background-color:var(--dim-bg);
        border-radius:0.5em;
        font-size:0.9em;
    }
    code.dim{opacity:.7;}

    a.big{
        font-family:var(--monospace);
        font-size: 1.05em;
        text-transform: lowercase;
        padding:.2em .8em;
        margin:.1em .5em;
        display:inline-block;
    }
    a.big:focus, a.big:hover{
        text-decoration:none;
    }



    div.content.contact{
        background-color:var(--dim-bg);
        border-radius:1em;
    }

    div.content.card{
        padding-bottom:1em;
    }
    div.content.card h3{
        margin-top:-.8em;
        margin-left:.8em;
    }

    div.content.contact a.contact{
        display:flex;
        justify-content: space-between;
        align-items:center;
        margin:1em 2em;
        --acc-bg:var(--fg);
        --alt-fg:var(--fg);
    }
    div.content.contact a#pc span{
        margin:0 0.2em;
    }
    div.content.contact a.contact>span{
        font-size:1.2em;
    }
    div.content.contact a.contact>svg{
        width:3em;
        margin-right:1.5em;
    }
    div.content.contact a.contact>svg>path{
        fill:var(--acc-bg);
    }

    div.content.contact a.copy{
        font-size: 0.8em;
        --fg: var(--dim-fg);
        background-color: var(--bg);
        padding: .2em .5em;
        border-radius: .5em;
        width: min-content;
        margin-top: -1.5em;
        align-self: flex-end;
        margin-right: 2em;
        cursor: copy;
        text-decoration: none !important;
        /* font-weight:400; */
    }
    div.content.contact a.copy:focus,
    div.content.contact a.copy:hover{
        outline:solid .2em var(--alt-fg);
    }

    div.content>div:has(h3){
        justify-content: space-between;
        align-items: baseline;
    }
    div.content>div>h3{
        margin-right:.8em;
    }


    footer small.privacy_notice{
        color:var(--dim-fg);
        font-family:var(--sans-serif);
        opacity:0.5;
        padding:0.5em;
        font-size:0.7em;
    }