/*
Styles.css,
created by Jordan Winburn
to the specifications of
ITCS 1050's Project 2.
*/

/* First, we'll create a global variable with the value of the color black.*/
:root {
    --blackColor: #000000;
}

/*Add the external font we downloaded to the project for use.*/
@font-face {
    font-family: Title Font;
    src: url("webfonts/AmaticSC-Bold.ttf");
    font-style: normal;
}

/*We'll create rules for the images on our page that make them float to the right of their container, with specified
borders and margins to help the page layout.*/
img 
{
    float: right;
    margin: 0px 15px 15px 15px;
    border: 1px solid var(--blackColor);
}

/*Set the body's content to the Arial font stack, and give it a special background color.*/
body 
{
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgba(102,204,255,.4);
}

/*Give content inside of the p element a specific text indent, line height, and font size.*/
p 
{
    text-indent: 1em;
    line-height: 1.5em;
    font-size: 1.5vw;
}

/*We'll now be styling the font of the h1 header, add a background to the h2 header, and then specify padding, borders, and font display
options for headers one through five.*/
h1 {
    font-family: Title Font, Arial, Helvetica, sans-serif;
    font-size: 7vw;
    text-shadow: 1px 1px 4px #336699;
}

h2 {
    background: url(images/coloradomountains_bkgd.jpg) repeat center;
    color: white;
    text-shadow: 1px 1px 5px var(--blackColor);
    padding: 25px;
    border: 2px inset var(--blackColor);
    font-variant: small-caps;
    box-shadow: 5px 10px 20px #336699 inset;
    font-size: 3vw;
}

h3 {
    font-variant: normal;
    padding: 5px;
    font-size: 2vw;
    border-bottom: 2px solid var(--blackColor);
}

h4 {
    font-variant: normal;
    padding: 5px;
    font-size: 1.75vw;
}

h5 {
    font-style: italic;
    color: darkslategray;
    font-size: 1vw;
}

/*Specify the stateflag class' float alignment, box shadow specifications, border and margin.*/
.stateflag 
{
    float: left;
    border: 1px inset white;
    margin: 5px 15px 10px 0px;
    box-shadow: 0px 3px 3px 1px var(--blackColor);
}

/*Specify the highlightSection class' font color, box shadow, and the element's padding.*/
.highlightSection 
{
    padding: 10px;
    background-color: white;
    box-shadow: 1px 1px 2px 1px steelblue;
}

/*Specify the copyright class' font size, style, alignment, and the element's padding.*/
.copyright 
{
    font-size: 9px;
    font-style: italic;
    text-align: center;
    padding: 10px;
}

/*Create rules for unordered list and its list items.*/
ul li {
    line-height: 1.5em;
    font-size: 1.5vw;
}

/*Specify the validation class' text alignment and size.*/
#validation 
{
    text-align: center;
    font-size: 11px;
}

/*Apply uniform link styling to your anchor element and the pseudo-classes attached to it so that when interacting with links, you have
style changes that go along with them.*/
a 
{
    text-decoration: underline;
    color: var(--blackColor);
}

a:link 
{
    text-decoration: underline;
    color: var(--blackColor);
    font-weight: bold;
}

a:visited 
{
    text-decoration: underline;
    color: darkblue;
}

a:hover 
{
    text-decoration: none;
    color: darkred;
    font-weight: bold;
}

a:active 
{
    text-decoration: underline wavy;
    color: darkred;
    font-weight: bold;
}