/* Filename: styles.css
   Name: Aaron Robinson
   Course: ITWP-1050
   Assignment Info: This is the second project for the course, created to demonstrate the skills learned with CSS thus far */
 
/* Root selector with a global variable */ 
:root {
	--blackColor: #000000;
}

/* References a font to be used for the h1 element of text. */
@font-face {
	font-family: Title Font;
	src :url(webfonts/AmaticSC-Bold.tff);
	font-style: normal;
}

/* Body selector that changes the font family to the following */
body {
	font-family: "Arial", Helvetica, sans-serif;
	background-color: rgba(102,204,255,.4);
}

/* Paragraph element selector that adjusts the indentation, line height, and font size */
p {
	text-indent: 1em;
	line-height: 1.5em;
	font-size: 1.5vw;
}

/* H1 element selector that adjusts various properties for the text used in this element */
h1 {
	font-family: "Amatic SC", "Arial", Helvetica, sans-serif;
	font-size: 7vw;
	text-shadow: 1px 1px 4px #336699;
}

/* H2 element selector that adds a repeating background image, and makes various adjustments to the formatting of the text */
h2 {
	background: url("images/coloradomountains_bkgd.jpg") repeat center;
	color: white;
	text-shadow: 1px 1px 5px var(--blackColor);
	padding: 25px;
	border: 2px var(--blackColor) inset;
	font-variant: small-caps;
	box-shadow: 5px 10px 20px #336699 inset;
	font-size: 3vw;
}

/* H3 element selector that makes changes to the formatting and size of the text */
h3 {
	font-variant: normal;
	padding: 5px;
	font-size: 2vw;
	border-bottom: 2px solid var(--blackColor);
}

/* H4 element selector that makes some slight adjustments to the formatting and size of the text */
h4 {
	font-variant: normal;
	padding: 5px;
	font-size: 1.75vw;
}

/* H5 element selector that adjusts the font style, color, and size */
h5 {
	font-style: italic;
	color: DarkSlateGray;
	font-size: 1vw;
}

/* An image element selector that floats all images to the right, and applies the appropriate formatting specified below */	
img {
	float: right;
	margin: 0px 15px 15px 15px;
	border: 1px solid var(--blackColor);
}

/* A class that floats the specified element to the left and gives it the other properties listed below */
.stateflag {
	float: left;
	border: 1px inset white;
	margin: 5px 15px 10px 0px;
	box-shadow: 0px 3px 3px 1px var(--blackColor);
}

/* Another class, used to modify the specified elements using the properties listed below */
.highlightSection {
	padding: 10px;
	background-color: white;
	box-shadow: 1px 1px 2px 1px SteelBlue;
}

/* Yet another class, used to adjust the font for anything that uses this class */
.copyright {
	font-size: 9px;
	font-style: italic;
	text-align: center;
	padding: 10px;
}

/* An element selector that adjusts the formatting for any ul and li tags on the page */
ul li {
	line-height: 1.5em;
	font-size: 1.5vw;
}

/* ID selector used for the validation text at the bottom of the page */
#validation {
	text-align: center;
	font-size: 11px;
}

/* Pseudo class for the a element */
a {
	text-decoration: underline;
	color: var(--blackColor);
}

/* Pseudo class for any links on the page */
a:link {
	text-decoration: underline;
	color: var(--blackColor);
	font-weight: bold;
}

/* Pseudo class that styles any link that's already been visited */
a:visited {
	text-decoration: underline;
	color: DarkBlue;
}

/* Pseudo class used to style any links that the user hovers over with their mouse */
a:hover {
	text-decoration: none;
	color: DarkRed;
	font-weight: bold;
}

/* Pseudo class that activates when the user clicks on a link */
a:active {
	text-decoration: underline wavy;
	color: DarkRed;
	font-weight: bold;
}