/* Primary colors:
    idnight Blue - #003B6D
    Blue Sky- #6699CC */
/* Secondary colors:
    Dim gray - #676767
    Silver- #BDBDBD */

/* Variables to Call Upon in Other Rules */
    :root {
        --color1: #003B6D;
        --color2: #6699CC;
        --color3: #676767;
        --color4: #BDBDBD;
    }

/* General Rules */
    * {
        font-family: "arial", Arial, Helvetica, sans-serif; 
        background-color: whitesmoke; 
        }

    .active {
        background-color: whitesmoke;
        
    }

    em {
        background-color: #6699CC;
    }

    article {
        float: right;
    }

    footer {
        float: left;
    }

    mark {
        background-color: whitesmoke;
    }


    /* Attempt at responsive layout for screen size - did not pass initial testing. */
    /* .container {
        display: grid;
        grid-template-rows: 80px auto 1fr auto 50px;
        grid-template-columns: 1fr 4fr 1fr;
        height: 100hv;
        grid-template-areas:
            "header     header      header"
            "left-aside     banner  right-aside"
            "left-aside     main    right-aside"
            "left-aside     low-content     right-aside"
            "footer     footer      footer";
        grid-gap: 10px; padding: 10px;
        font-weight: 600; font-size: 20px;
    } */
    
/* Body Rules */

    /* Menu Rules */
    .navigation {
        background-color: var(--color2);
    }

    /* Background Image */


/* Form Rules */

input{
    /* padding: 6px 12px 6px 12px; */
    border: 1px solid var(--color1);
    color: #000;
}
input.submit:hover {
    background-color: var(--color2);
}
input.submit:active {
    background-color: goldenrod;
}
input.text {
    color: var(--color1);
}
input.text:focus {
    color: #665544;
}

/* Search Rules */

.search-box {
    float: right;
}

/* Sub Banner Rules */
    .banner {
        background-color: var(--color2);
        color: whitesmoke;
    }


/* Image Rules */

    img.large {
        height: 500px;
        width: 500px;
    }

    img.medium {
        height: 250px;
        width: 250px;
    }

    img.small {
        height: 100px;
        width: 100px;
    }

    .imgAlign {
        text-align: center;
    }


/* Linking Rules */
a:link {
    color: var(--color2);
    text-decoration: none;
}

a:visited {
    color: var(--color2);
    text-decoration: underline;
}

a:hover {
    color: goldenrod;
    background-color: whitesmoke;
    text-decoration: underline;
}

a:active {
    color: var(--color1);
}

/* Error Page Rules */

.errorPage {
    text-align: center;
    padding: 100px;
}