/* Global styles*/
html {
    font-family: Georgia, Times, "Times New Roman", serif;
    font-size: 1em;
}

body {
    margin: 0;
    padding: 2vH 0 0 0;
}

header, main, footer {
    display: block;
margin-left: clamp(5px, 50vw - 230px,440px);
margin-right: clamp(4px, 50vw - 230px, 440px);
}

#top-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
}

main {
    padding: 4vh 0 0 0;
    font-family: Georgia, Times, "Times New Roman", serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Century Gothic", "Apple Gothic", "Avant Garde", Futura,Helvetica,sans-serif;
}

h1 {
    font-size: clamp(2.5rem, 8vh - 20px, 4rem);
    margin-top: 1vh;
    padding-top: 2px;
    color: navy;
}

h2 {
    margin-top: 2.1rem;
    font-size: 1.9rem;
    color: navy;
}

h3 {
    font-size: 1.7rem;
}

h4 {
    font-size: 1.5rem;
}

.body-text  p {
    margin-bottom: 1rem;
color: #1F1F1F;
}

.body-text p, .body-text ul, .body-text ol, .body-text li {
    font-size: 1rem;
    letter-spacing: 2px;
    line-height: 1.5;
}

.body-blist {
    list-style-type: square;
    margin: 1rem 0 1rem  0;
    padding-left: 2em;
}

.body-blist>li {
    margin-bottom: 1rem;
    padding: 0;
}

.body-blist>li::marker {
font-size: 2em;
color: blue;
}

main *[lang] {
    font-style: italic;
}

code {
    font-family: "Courier New", Courier, monospace;
    color: #3F3F3F;
    background-color: #F0F0F0;
    font-weight: 600;
    font-style: normal;
}

    .negativenum::before {
        content: '−' / 'negative';
        position: relative;
        top: 40%;
         right: -0.15em;
    }

footer {
    margin: 3rem 0 0 0;
    padding-top: 2rem;
    border-top: 1vh solid gray;
    background-color: #F0F0F0;
    font-size: 1rem;
}

#logoblock {
    display: inline-flex;
    flex-direction:  column;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    margin: 0 1rem 0 0;
    padding: 0;
    }

#slogan {
    font-family: "Trebuchet MS", Calibri, Helvetica, sans-serif;
    font-size: 1.2rem;
    font-style: italic;
    font-weight: 300;
    letter-spacing: 3px;
    text-align: center;
    line-height: 1.4;
}

#slogan Q {
    FONT-SIZE: 1.5em;
    FONT-WEIGHT: 900;
}

    #logoblock img {
height: clamp(80px, 16vw, 170px);
width: auto;
        margin-top: 0.1REM;
    }

    .bold-text {
        font-weight: bold;
    }

/* global styles for tables  */
table {
    border-collapse: collapse;
    table-layout: fixed;
    border: 4px solid dimgray;
}

    table th, table td {
        border: 3px solid dimgray;
    }

    table thead th {
        vertical-align: bottom;
        padding: 0.6rem 0.5rem 0.5rem 0.5rem;
        font-family: "Trebuchet MS", Calibri, Helvetica, sans-serif;
        font-weight: bold;
    }

    table thead tr {
        background-color: #FCFCFC;
    }

    table tbody td {
        vertical-align: top;
        padding: 0.5rem 0.5rem 0.6rem 0.5rem;
    }

    table caption {
        margin: 2rem 0 0.8rem 0;
        text-align: left;
        font-family: "Trebuchet MS", Calibri, Helvetica, sans-serif;
        font-weight: bold;
        font-size: 1.4rem;
        color: #767676;
    }
/* specific table styles */
/*".SmallTable" for 3 columns */
.small-tbl3col-2centered {
  width: clamp(350px, 85%, 700px);
  margin-left: 1vw;
}

    .small-tbl3col-2centered thead th:nth-child(1) {
        width: clamp(3rem, 16%, 5rem);
    }

    .small-tbl3col-2centered thead th:nth-child(2) {
        width: 15%;
    }

.small-tbl3col-2centered thead th:last-child {
    text-align: left;
}

.small-tbl3col-2centered tbody td:nth-child(3n+1),
.small-tbl3col-2centered tbody td:nth-child(3n+2) {
    text-align: center;
}

.small-tbl3col-2centered input {
    width: 2rem;
    border: none;
    font-size: 2.5rem;
    text-align: center;
}
/* all-purpose table with any number of columns. Good for responsive design */
.small-tbl-all-left {
    width: clamp(22rem, 90%, 50rem);
    table-layout: auto;
}

    .small-tbl-all-left thead th {
        text-align: left;
    }

    .small-tbl-all-left td {
        line-break: loose;
    }

    /* use only with inline elements that do not get focus */
.offscreen {
    position: absolute;
    top: auto;
    left: -99rem;
}

    #skip-menus {
        display: block;
        padding: 0.4rem;
        position: absolute;
        top: auto;
        left: -99rem;
    }

    #skip-menus:focus {
        left: 8vw;
    }

/* Prevent line breaks  within inline elements that contain small amounts of content*/
.noBreak {
    white-space: nowrap;
    }