/* Memos CSS Document */

:root {
    --fonts-sans: 'Fira Sans', 'FiraGo', Cantarell, 'Open Sans', 'Noto Sans', Roboto, system-ui,  -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, 'Helvetica Neue', 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans', Verdana, Lucida, Geneva, Arial, sans-serif;
    --grey-1: #e8e8e8;  /* background grey */
    --grey-2: #d0cfd0;  /* horizontal rule grey*/
    --bg-color: #fff;   /* default background color */
    --text: #000;       /* Standard text color */
    --base-font-size: 16px;
    --standard: 1em;        /* Standard text size */
    --standard-line-ht: 1.5em;
    --base-font-size-print: 12pt;
    --mega-size: 96px;
    --mega-size-print: 96pt;
    --letter-width: 7.0in;  /* Normally 8.5 */
    --letter-height: 9.5in; /* Normally 11.0 */
    --a4-width: 210mm;
    --a4-height: 297mm;
}
/* Remove spacing defaults */
* { margin: 0; padding: 0; }

@media screen {
    html {
        color: var(--text);
        background-color: var(--grey-1);
        margin: 0em;
        padding: 0em;
    }
    body {
        color: var(--text);
        background-color: var(--bg-color);
        border: 1px solid var(--grey-2);
        overflow-x: hidden;
    }
    header {
        color: var(--text);
        background-color: var(--bg-color);
        font-family: var(--fonts-sans);
/*      font-size: clamp(32px,var(--mega-size), var(--mega-size));*/
        font-size: var(--mega-size);
        font-weight: bold;
        text-align: left;
        line-height: 1em;
    }
    main {
        font-size: var(--base-font-size);
        color: var(--text);
        background-color: var(--bg-color);
        font-family: var(--fonts-sans);
        margin: 0;
        width: auto;
    }
    footer {
        /* Presently not used */
    }
    p, b, ul, ol, td, li {
        font: var(--standard)/var(--standard-line-ht) var(--fonts-sans);
    }
    p, ul, ol, td, li {    margin-bottom: 1em; }
}

@media print {
    html {
        color: var(--text);
        background-color: #fff;
        margin: 0;
        padding: 0;
    }
    body {
        color: var(--text);
        background-color: #fff;
        margin: 0;
        padding: 0;
    }
    body>header {
        color: var(--text);
        background-color: #fff;
        font-family: var(--fonts-sans);
        font-size: var(--mega-size-print);
        font-weight: bold;
        text-align: left;
        line-height: 1em;
        margin: 0.5in 0.5in 0 0.5in;
        /* Assuming half inch margins, we add another half inch to get a full inch of padding around header */
        /* It might be better to provide instructions to set margins to 0 or provide PDF versions */
    }
    main {
        color: var(--text);
        background-color: #fff;
        font-size: var(--base-font-size-print);
        font-family: var(--fonts-sans);
        margin: 0 0.5in 0 0.5in; /* Assuming half inch margins, we add another half inch to get a full inch of padding */
    }
    footer {
        /* Presently not used */
    }
    p, b, ul, ol, td, li {
        font: var(--standard)/var(--standard-line-ht) var(--fonts-sans);
    }
    p, ul, ol, td, li {    margin-bottom: 1em; }
}

@media screen and (min-width: 1024px) {
    body {
        margin: 0 auto;
        padding: 2.54cm;
        max-width: var(--letter-width);
        min-height: var(--letter-height);
    }
}
@media screen and (max-width: 1024px) {
    body {
        margin: 0;
        padding: .25em;
    }
}

@media screen, print {
    #meta {    border-bottom: 1px solid var(--grey-2);}
    #content {    margin: 1em 0;}
    b { font-weight: bold; }
    hr {
        height: 1em;
        margin: 1em 0;
        padding: 0;
        border: none;
        border-bottom: 1px solid var(--grey-2);
        clear: both;
    }
    table {    border: 0;}
    tr {}
    td {    text-align: left;
        vertical-align: top;
    }
    td:nth-child(2) { padding: 0 2em;}
    ol, ul {
        margin: 0 2em 1em 2em;
        padding: 0;
    }
    ol ol, ul ul{
        margin: 0 2em;
        padding: 0;
    }
    li  {
        margin: .25em 0;
        padding: 0;
    }
    ol      { list-style: decimal inside;}
    ol ol   { list-style: lower-alpha inside;}
    ul      { list-style: square inside;}
    ul ul   { list-style: circle inside;}
}