@import url('https://fonts.googleapis.com/css2?family=David+Libre:wght@400;700&display=swap');

html {
    background: #f5f5f5;
}

table {
    direction: ltr;
}

body {
    direction: rtl;
    font-family: Arial, sans-serif;
    line-height: 1.7;
    background: white;
    margin: auto;
    max-width: 50em;
    padding: 3em;

}


h1 {
    border-top: 2px solid;
    padding-top: 1em;
    margin-top: 3em;
}

em {
    font-weight: bold;
    font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
b b {
    color: #c30e59;
}

img {
    max-width: 25em;
    margin: 0 auto;
    display: block;
}

span.subq {
    font-size: 20px;
    color: #c30e59;
    font-weight: bold;
    padding-left: 14px;
}

html.dark {
    filter: invert(1) hue-rotate(180deg);
}

.answer {
    background: rgba(195, 14, 89, 0.073);
    margin: 2em;
    padding: 0.5em;
    border-radius: 0.25em;
    list-style: none;
}

@media screen and (max-width: 1000px) {
    .answer {
        margin: 2em 0;
        padding: 1.5em 0;
    }

    img {
        max-width: 100%;
    }

    p,
    li,
    img,
    ul,
    ol {
        margin-left: auto;
        padding-left: 0;
        overflow-x: auto;
    }

    ul {
        padding-right: .5em;
    }

    body {
        padding: 0.4em;
    }
}


.answer {
    position: relative;
}

.answer button {
    border: none;
    border-radius: 10px;
    padding: 6px 1em;
    color: #53535373;
    cursor: pointer;
    background: none;
    display: block;
    position: absolute;
    font-size: xx-small;
    top: 0;
    left: 0;
    margin: .5em;
}



.answer button:hover {
    background: #ff909037;
    color: red;
}


/* for printing */
@media print {
    section:not(:first-of-type) {
        page-break-before: always;
        break-before: page;
        break-inside: avoid;
    }

    ul {
        padding-inline-start: 10px;
    }

    h1 {
        font-size: 2.5em;
    }

    html {
        background: white;
    }

    * {
        color: black !important;
    }

    body {
        font-family: 'David Libre', serif;
        max-width: none;
        background: white !important;
        padding: 0;
        font-size: 12px;
    }

    h1,
    h2,
    h3,
    h4 {
        margin: 0 !important;
        padding: 0 !important;
        color: black;
    }

    img {
        max-width: 250px;
    }

    .answer {
        border: .1pt solid black;
        color: black;
        box-shadow: none;
        padding: 1em 2em;
        margin: 5px;
        background: none;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .answer button {
        display: none;
    }

    @page {
        size: A4 portrait;
        margin: 1cm;
    }

    body {
        column-count: 2;
        column-rule: 0.1pt solid black;
        column-fill: balance;
    }

    h1 {
        border: none;
    }

    h1,
    h2,
    h3,
    figure,
    pre,
    code,
    table,
    blockquote {
        break-inside: avoid;
        /* avoid column/page splits inside */
        page-break-inside: avoid;
        /* legacy alias for some UAs */
    }

    h1,
    h2,
    h3 {
        break-after: avoid;
    }

    .break-col {
        break-before: column;
    }

    /* start next column here */
    .avoid-col {
        break-inside: avoid-column;
    }

    .span-all {
        column-span: all;
    }

}