:root {
    --Light-Rosewater: #dc8a78;
    --Light-Flamingo: #dd7878;
    --Light-Pink: #ea76cb;
    --Light-Mauve: #8839ef;
    --Light-Red: #d20f39;
    --Light-Maroon: #e64553;
    --Light-Peach: #fe640b;
    --Light-Yellow: #df8e1d;
    --Light-Green: #40a02b;
    --Light-Teal: #179299;
    --Light-Sky: #04a5e5;
    --Light-Sapphire: #209fb5;
    --Light-Blue: #1e66f5;
    --Light-Lavender: #7287fd;
    --Light-Text: #4c4f69;
    --Light-Subtext-1: #5c5f77;
    --Light-Subtext-0: #6c6f85;
    --Light-Overlay-2: #7c7f93;
    --Light-Overlay-1: #8c8fa1;
    --Light-Overlay-0: #9ca0b0;
    --Light-Surface-2: #acb0be;
    --Light-Surface-1: #bcc0cc;
    --Light-Surface-0: #ccd0da;
    --Light-Base: #eff1f5;
    --Light-Mantle: #e6e9ef;
    --Light-Crust: #dce0e8;
    --Dark-Rosewater: #f5e0dc;
    --Dark-Flamingo: #f2cdcd;
    --Dark-Pink: #f5c2e7;
    --Dark-Mauve: #cba6f7;
    --Dark-Red: #f38ba8;
    --Dark-Maroon: #eba0ac;
    --Dark-Peach: #fab387;
    --Dark-Yellow: #f9e2af;
    --Dark-Green: #a6e3a1;
    --Dark-Teal: #94e2d5;
    --Dark-Sky: #89dceb;
    --Dark-Sapphire: #74c7ec;
    --Dark-Blue: #89b4fa;
    --Dark-Lavender: #b4befe;
    --Dark-Text: #cdd6f4;
    --Dark-Subtext-1: #bac2de;
    --Dark-Subtext-0: #a6adc8;
    --Dark-Overlay-2: #9399b2;
    --Dark-Overlay-1: #7f849c;
    --Dark-Overlay-0: #6c7086;
    --Dark-Surface-2: #585b70;
    --Dark-Surface-1: #45475a;
    --Dark-Surface-0: #313244;
    --Dark-Base: #1e1e2e;
    --Dark-Mantle: #181825;
    --Dark-Crust: #11111b;
}

@media (prefers-color-scheme: dark) {
    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    /*
     * -- BASE STYLES --
     * Most of these are inherited from Base, but I want to change a few.
     */
    body {
        line-height: 1.7em;
        color: var(--Dark-Text);
        font-size: 13px;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    label {
        color: var(--Dark-Subtext-0);
    }

    .pure-img-responsive {
        max-width: 100%;
        height: auto;
    }

    /*
     * -- LAYOUT STYLES --
     * These are some useful classes which I will need
     */
    .l-box {
        padding: 1em;
    }

    .l-box-lrg {
        padding: 2em;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }

    .is-center {
        text-align: center;
    }



    /*
     * -- PURE FORM STYLES --
     * Style the form inputs and labels
     */
    .pure-form label {
        margin: 1em 0 0;
        font-weight: bold;
        font-size: 100%;
    }

    .pure-form input[type] {
        border: 2px solid #ddd;
        box-shadow: none;
        font-size: 100%;
        width: 100%;
        margin-bottom: 1em;
    }

    /*
     * -- PURE BUTTON STYLES --
     * I want my pure-button elements to look a little different
     */
    .pure-button {
        background-color: var(--Dark-Blue);
        color: var(--Dark-Overlay-0);
        padding: 0.5em 2em;
        border-radius: 5px;
    }

    a.pure-button-primary {
        background: var(--Dark-Overlay-0);
        color: var(--Dark-Saphire);
        border-radius: 5px;
        font-size: 120%;
    }


    /*
     * -- MENU STYLES --
     * I want to customize how my .pure-menu looks at the top of the page
     */

    .home-menu {
        padding: 0.5em;
        text-align: center;
        box-shadow: 0 1px 1px rgba(0,0,0, 0.10);
    }
    .home-menu {
        background: var(--Dark-Crust);
    }
    .pure-menu.pure-menu-fixed {
        /* Fixed menus normally have a border at the bottom. */
        border-bottom: none;
        /* I need a higher z-index here because of the scroll-over effect. */
        z-index: 4;
    }

    .home-menu .pure-menu-heading {
        color: var(--Dark-Text);
        font-weight: 400;
        font-size: 120%;
    }

    .home-menu .pure-menu-selected a {
        color: var(--Dark-Overlay-1);
    }

    .home-menu a {
        color: var(--Dark-Blue);
    }
    .home-menu li a:hover,
    .home-menu li a:focus {
        background: none;
        border: none;
        color: var(--Dark-Saphire);
    }


    /*
     * -- SPLASH STYLES --
     * This is the blue top section that appears on the page.
     */

    .splash-container {
        background: var(--Dark-Base);
        z-index: 1;
        overflow: hidden;
        /* The following styles are required for the "scroll-over" effect */
        width: 100%;
        height: 88%;
        top: 0;
        left: 0;
        position: fixed !important;
    }

    .splash {
        /* absolute center .splash within .splash-container */
        width: 80%;
        height: 50%;
        margin: auto;
        position: absolute;
        top: 100px; left: 0; bottom: 0; right: 0;
        text-align: center;
        text-transform: uppercase;
    }

    /* This is the main heading that appears on the blue section */
    .splash-head {
        font-size: 20px;
        font-weight: bold;
        color: var(--Dark-Text);
        border: 3px solid var(--Dark-Text);
        padding: 1em 1.6em;
        font-weight: 100;
        border-radius: 5px;
        line-height: 1em;
    }

    /* This is the subheading that appears on the blue section */
    .splash-subhead {
        color: var(--Dark-Subtext-0);
        letter-spacing: 0.05em;
        opacity: 0.8;
    }

    /*
     * -- CONTENT STYLES --
     * This represents the content area (everything below the blue section)
     */
    .content-wrapper {
        /* These styles are required for the "scroll-over" effect */
        position: absolute;
        top: 87%;
        width: 100%;
        min-height: 12%;
        z-index: 2;
        background: var(--Dark-Surface-1);

    }

    /* We want to give the content area some more padding */
    .content {
        padding: 1em 1em 3em;
    }

    /* This is the class used for the main content headers (<h2>) */
    .content-head {
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        margin: 2em 0 1em;
    }

    /* This is a modifier class used when the content-head is inside a ribbon */
    .content-head-ribbon {
        color: var(--Dark-Subtext-0);
    }

    /* This is the class used for the content sub-headers (<h3>) */
    .content-subhead {
        color: var(--Dark-Subtext-1);
    }
        .content-subhead i {
            margin-right: 7px;
        }

    /* This is the class used for the dark-background areas. */
    .ribbon {
        background: var(--Dark-Surface-0);
        color: var(--Dark-Text);
    }

    /* This is the class used for the footer */
    .footer {
        background: var(--Dark-Mantle);
        position: fixed;
        bottom: 0;
        width: 100%;
    }

    /*
     * -- TABLET (AND UP) MEDIA QUERIES --
     * On tablets and other medium-sized devices, we want to customize some
     * of the mobile styles.
     */
    @media (min-width: 48em) {

        /* We increase the body font size */
        body {
            font-size: 16px;
        }

        /* We can align the menu header to the left, but float the
        menu items to the right. */
        .home-menu {
            text-align: left;
        }
            .home-menu ul {
                float: right;
            }

        /* We increase the height of the splash-container */
    /*    .splash-container {
            height: 500px;
        }*/

        /* We decrease the width of the .splash, since we have more width
        to work with */
        .splash {
            width: 50%;
            height: 50%;
        }

        .splash-head {
            font-size: 250%;
        }


        /* We remove the border-separator assigned to .l-box-lrg */
        .l-box-lrg {
            border: none;
        }

    }

    /*
     * -- DESKTOP (AND UP) MEDIA QUERIES --
     * On desktops and other large devices, we want to over-ride some
     * of the mobile and tablet styles.
     */
    @media (min-width: 78em) {
        /* We increase the header font size even more */
        .splash-head {
            font-size: 300%;
        }
    }
}