html,
body {
    padding: 0px;
    margin: 0px;
    border: none;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    /* line-height: 1; */
}

:root {
    --bg: #ffffff;
    --surface: #f8f9fa;
    --border: #e3e3e3;
    --text: #2e2e2e;
    --text-secondary: #6c757d;
    --link-color: rgb(40, 117, 251);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1e1e1e;
        --surface: #262626;
        --border: #2a2a2a;
        --text: #e0e0e0;
        --text-secondary: #a8a8a8;
        --shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        --link-color: rgb(103, 158, 254);
    }
}

@media print {

    *,
    *:before,
    *:after,
    *:first-letter,
    p:first-line,
    div:first-line,
    blockquote:first-line,
    li:first-line {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    :root {
        --main-color: #000;
        --background-color: #fff;
        --main-background-color: #fff;
    }

    main {
        font-size: 12pt !important;
        line-height: 1.4 !important;
        --background-color: #fff !important;
    }

    header {
        display: none;
    }

    footer {
        display: none;
    }

    article {
        page-break-after: always;
        border: 0 !important;
        padding: 0 !important;
    }

    a[href] {
        color: #000;
    }
}

html {
    background-color: var(--surface);
    display: flex;
    justify-content: center;
    flex-direction: row;
}

body {
    color: var(--text);
    font-family: Arial,
        Helvetica,
        sans-serif;
    line-height: 1.5;
    width: 100%;
    max-width: 1200px;
}

a {
    color: var(--link-color);
}

header,
footer {
    padding: 0 2rem;
}

main {
    padding: 0 2rem;
}

article {
    background-color: var(--bg);
    padding: 1.5em 2em;
    margin: 1em 0;
    border: 0.1px solid var(--border);
}



p {
    orphans: 3;
    widows: 4;
}

figure {
    max-width: 800px;
}


img {
    max-width: 100%;
}

@media (max-width: 900px) {
    main {
        font-size: 15px;
        line-height: 1.5;
        padding: 0 2em;
    }
}

@media (max-width: 480px) {
    main {
        font-size: 14px;
        line-height: 1.4;
        padding: 0 1em;
    }
}


pre,
code {
    max-width: 100%;
    overflow-x: scroll;
}