:root {
    --nav-bar-height: 50px;
    --nav-bar-height-mobile: 50px;
}

@media print {
    :root {
        --nav-bar-height: 0;
        --nav-bar-height-mobile: 0;
    }

    pre * {
        white-space: pre-wrap;
/*        width: 100%;*/
    }

    nav {
        display: none;
    }
}

@media (prefers-color-scheme: light){
    :root {

        --fg-color-1: black;
        --bg-color-1: white;

        --accent-color-1: rgba(20, 78, 59, 0.7);
        --accent-color-2: rgba(20, 78, 59, 1);

        --tooltip-blue:   #0969da; /* fixed */
        --tooltip-green:  #1a7f37; /* fixed */
        --tooltip-purple: #8250df; /* fixed */
        --tooltip-yellow: #bb8813; /* fixed #bf8700 */
        --tooltip-red:    #cf222e; /* fixed */

        --blockquote-grey: #767676;

    }
}

@media (prefers-color-scheme: dark){
    :root {

        --fg-color-1: white;
        --bg-color-1: #121212;

        --accent-color-2: #56e45d;
        --accent-color-1: #123c2d;

        --tooltip-blue:   #60a7f8; /* fixed */
        --tooltip-green:  #25b14c; /* fixed */
        --tooltip-purple: #9a74e6; /* fixed */
        --tooltip-yellow: #bf8700; /* fixed */
        --tooltip-red:    #ff3d4d; /* fixed */

        --blockquote-grey: #939393;
    }
}

:target {
    scroll-margin-top: calc(var(--nav-bar-height) + 10px);
}

::selection {
    background: var(--accent-color-1);
}

@media (max-width: 600px) {
    :target {
        scroll-margin-top: calc(var(--nav-bar-height-mobile) + 10px);
    }
}

.show {
    border: 1px solid red;
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

body {
    background-color: var(--bg-color-1);
    color: var(--fg-color-1);
    accent-color: var(--accent-color-1);

    /* font-family: "JetBrains Mono", sans-serif; */
    font-family: Helvetica, sans-serif;
    tab-size: 4;
    line-height: 1.4;
}

#main {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

main{
    padding: 0.0rem 1rem;
}

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

a:hover{
    text-decoration: none;
}

span.date {
    color: grey;
}

code {
    font-family: "JetBrains Mono", sans-serif;
}