html, body {
    font-size: 16px;
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

.w3-content {
    flex: 1 0 auto;
}

footer {
    flex-shrink: 0;
}

body, h1, h2, h3, h4, h5 {
    font-family: "Raleway", sans-serif
}

blockquote {
    font-style: italic;
}

a {
    color: #1C40AD;
}

hr {
    border-color: black;
    padding-top: 0;
    padding-bottom: 0;
}

h1 a {
    color: #ffffff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.duedate {
    color: #B3891D;
}
.bluebg {
    background-color: #1C40AD;
}
.w3-container {
    background-color: #1C40AD;
    color: #ffffff;
}

pre {
    white-space: pre-wrap; /* Since CSS 2.1 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

@media only screen and (max-width: 420px) {

    #podOpen {
        max-width: 300px!important;
    }

}

@media(prefers-color-scheme: dark) {
     body {
        background-color: #000;
        color: #ccc;
    }

     table, td, p {
         color: #ccc;
     }

     table, td{
         border-color: #ccc;
     }

    .w3-container,  {
        background-color: #1C40AD;
    }
    .w3-button {
        border-color: #1C40AD !important;
        border-width: 5px!important;
    }
    .w3-white {
        background-color: #393939!important;
    }

    .w3-button:hover {
        background-color: #4f4f4f !important;
    }

    a {
        color: #ccc !important;
    }

    a:visited {
        color: #aaf;
    }

    h1, h1 a, h2, h2 a, h3, h3 a, h4, h5, .w3-button, li, input, label, textarea, button {
        color: #ccc!important;
    }
}