body { background-color: #650df1; }

/*
    Headings:
    - Times New Roman.
    - Slight font+color variations depending on size
*/
h1 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: rgb(17, 25, 134)
}
h2, h3 {
    font-family: 'Times New Roman', Times, serif;
    color: rgb(17, 60, 180)
}
h4, h5, h6 {
    font-family: 'Times New Roman', Times, sans-serif;
    color: rgb(0, 100, 90)
}

/*
    Most text/image elements:
    - links, paragraphs, captions, list items, table items
    - Arial font as opposted to more formal Times font
    - Images have their max-width set to 100%

*/
a, p, figcaption, figure, form, li, table {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color:black
}
img {
    max-width: 100%;
}

/*
    Links:
    - Visited and unvisited same green color
    - Hover is crimson color
    - Active is pink color
*/
a { color: #6152a3; }
nav.nch-nav-1 > a { color:#443485 }
nav.nch-nav-2 > a { color:#6152a3; }
nav.nch-nav-3 > a { color:#8373cc; }

a:visited { color: #477010; }
nav.nch-nav-1 > a:visited { color:#283f0b; }
nav.nch-nav-2 > a:visited { color:#477010; }
nav.nch-nav-3 > a:visited { color:#548f07; }

a:hover { color: crimson; }
nav.nch-nav-1 > a:hover {color:#9c0624}
nav.nch-nav-2 > a:hover {color:crimson}
nav.nch-nav-3 > a:hover {color:#f35373}

a:active { color: #ff91a3; }
nav.nch-nav-1 > a:active {color:#eb6279}
nav.nch-nav-2 > a:active {color:#ff91a3}
nav.nch-nav-3 > a:active {color:#fdb7c3}

a.no-underline { color: #e0d4eb; }

/*
    Specific text styling:
    - Bold, italic, centering
    - Special text
    - Font size
*/
.bold { font-weight: bolder; }
.text-bold { font-weight: bold; }
.text-italic { font-style: italic; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.special {
    color:#AA6600;
    font-style: italic;
}

/*
    Dashes:
    - Separate sections
*/
hr.dashed { border-top: 2px dotted #08C; }

.figure {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-style: italic;
    width: 50%;
}

.input-1 { width: 36px; }
.input-2 { width: 48px; }
.input-3 { width: 72px; }

/*
    Tables:
*/

.table {
    border-color: black;
    background-color: darkslategray;
    border-width: 3px;
    border-style: groove;
}
.table tr { color: #000000; }
.table tr:nth-child(odd) { background-color: #999; }
.table tr:nth-child(even) { background-color: #CCC; }
.table tr:nth-child(1) {
    background-color: #444;
    color: #DDDDDD;
}

.tableform tr { color: #000000; }
.tableform tr:nth-child(1) { background-color: #5c8f7f; }
.tableform tr:nth-child(even) { background-color: #7ecab0; }
.tableform tr:nth-child(odd) { background-color: #7bf1c8; }
.tableform {
    width: 80%;
    margin: auto;
}
.tableform textarea, .tableform table.tableform input {
    width: 95%;
    resize: none;
}

table.subtable { width: 100%; }
.add { width: 100%; }

/*
    Divs:
*/

.div-floating {
    margin: auto;
    border: 16px;
    border-width: 5px;
    border-style: solid;
    margin-bottom: 12px;
}
.div-background {
    background-image: linear-gradient(#650df1, #463492);
    padding: 10px 4px 10px 4px;
    margin: -8px;
    margin-top: 30px;
}
.div-background-alt {
    background-image: linear-gradient(#463492, #650df1);
    padding: 10px 4px 10px 4px;
    margin: -8px;
}
.div-header {
    background-color: #7fbff4;
    padding: 2px;
    border-image: linear-gradient(#3cf664, #270c9f) 30;
    max-width: 1100px;
}
.div-subheader {
    background-color: #7fffd4;
    padding: 2px;
    border-image: linear-gradient(#5c8f7f, #7ecab0, #7bf1c8) 30;
    margin: 8px;
}
.div-main {
    background-color: #b4f5df;
    padding: 10px;
    max-width: 950px;
    border-width: 3px;
    border-image: linear-gradient(#FFFFFF, #000000) 45;
}
.div-footer {
    background-color: #e0d4eb;
    max-width: 1100px;
    border-image: linear-gradient(#022646, #3b0492) 30;
    
}
.div-fill {
    height: 100%;
}

.div-results {
    width: 50%;
    min-width: 64px;
    max-width: 240px;
    background: cyan;
    border-color: #08C;
    border-style: ridge;
    border-width: 4px;
    padding: 10px;
    margin-top: 10px;
}

.div-results p, .div-results h2 {
    text-align: center;
}
.div-results p {
    font-family: 'Courier New', Courier, monospace;
}
.div-results table {
    margin: auto;
    width: 90%;
}

/*
    Media selectors:
*/

@media (max-width: 576px) {
    figure img {
        min-width: 250px;
    }

    .table {
        table-layout: fixed;
        width: 22em;
        font-size: smaller;
    }

    .tableform {
        width: 100%;
    }
    .tableform tr td:first-child {
        max-width: 5em;
    }

    .div-main {
        padding: 4px;
    }
    .div-background, .div-background-alt {
        padding-top: 16px;
        padding-bottom: 16px;
        min-width: 100%;
    }
}

/*
    Miscellaneous objects:
*/

.calculator {
    max-width: 210px;
    min-height: 280px;
    table-layout: fixed;
    border-color: #08C;
}

.calculator table tr th button {
    min-width: 35px;
    min-height: 35px;
    background-color: cyan;
    border-color: #08C;
}

.calculator table tr th .calculator-equals {
    min-height: 80px;
}

.calculator table tr td span.display1 {
    font-family: monospace;
    font-size: 1.2em;
    color:rgb(43, 113, 148);
    font-style: italic;
}

.calculator table tr td span.display2 {
    font-size: 1.6em;
    font-family: monospace;
}