/*CSS Document used for project2 assignment
Author: Joe Licavoli
Course: ITWP1050*/

/* root selector with global variable*/
:root {
/* Sets the variable name and color code*/
	--blackColor: #000000;
}

@font-face {
	font-family: 'Title Font';
	src: url('webfonts/AmaticSC-Bold.ttf');
	font-style: normal;
}
/* This sets the body selector*/
body {
	/* This sets font family & background color to teal)*/
	font-family: arial, helvetica, sans-serif;
	background-color: rgba(102, 204, 255, .4);
}

/* Sets the paragraph selector*/
p {
	/* Changes text indent, line height, and font size*/
	text-indent: 1em;
	line-height: 1.5em;
	font-size: 1.5vw;
}
/* The H1 selector */
h1{
	/* This sets font family, size and text shadow*/
	font-family: Title Font, arial, helvetica, sans-serif;
	font-size: 7vw;
	text-shadow: 1px 1px 4px #336699;
}
/* The H2 selector */
h2{
	/* Sets background image to url, repeat and centered*/
	background-image: url("images/coloradomountains_bkgd.jpg");
	background-repeat: repeat;
	background-position: center;
	/* Sets text color to white, text shadow to variable and padding to 25px*/
	color: white;
	text-shadow: 1px 1px 5px var(--blackColor);
	padding: 25px;
	/* Sets border width , font varaint , box shadow, and font size*/
	border-width: 2px inset var(--blackColor);
	font-variant: small-caps;
	box-shadow: 5px 10px 20px #336699 inset;
	font-size: 3vw;
}
/* The H3 selector */
h3{
	/* Sets font variant, font size , padding, and adds a bottom border*/
	font-variant: normal;
	padding: 5px;
	font-size: 2vw;
	border-bottom: 2px solid var(--blackColor);
}
/* The H4 selector */
h4{
	/* Sets font variant, padding, and font size*/
	font-variant: normal;
	padding: 5px;
	font-size: 1.75vw;
}
/* The H5 selector */
h5{
	/* Sets font style, color of text, and font size*/
	font-style: italic;
	color: darkslategray;
	font-size: 1vw;
}
/* The img selector*/
img {
	/* Sets float to right, all margins, and border*/
	float: right;
	margin-top: 0;
	margin-right: 15px;
	margin-bottom: 15px;
	margin-left: 15px;
	border: 1px solid var(--blackColor);
}
/* This the class for stateflag */
.stateflag {
	/* Sets float to left, adds border, all margins, and a box shadow */
	float: left;
	border: 1px inset white;
	margin-top: 5px;
	margin-right: 15px;
	margin-bottom: 10px;
	margin-left: 0;
	box-shadow: 0px 3px 3px 1px var(--blackColor);
}
/* This the class for highlightSection */
.highlightSection {
	padding: 10px;
	background-color: white;
	box-shadow: 1px 1px 2px 1px steelblue;
}
/* This the class for copyright */
.copyright {
	/* Sets font size, style, text alignment, and padding */
	font-size: 9px;
	font-style: italic;
	text-align: center;
	padding: 10px;
}
/* The ul and li selectors */
ul, li {
	/* Sets line height and font size */
	line-height: 1.5em;
	font-size: 1.5vw;
}
/* The ID selector for validation */
#validation {
	/* Centers the text and sets font size*/
	text-align: center;
	font-size: 11px;
}
/* The anchor tag selector */
a {
	/* Underlines text and sets color using variable */
	text-decoration: underline;
	color: var(--blackColor);
}
/* The anchor link state */
a:link {
	/* Underlines text, sets color using variable, and makes it bold */
	text-decoration: underline;
	color: var(--blackColor);
	font-weight: bold;
}
/* The anchor visited state */
a:visited {
	/* Underlines text and sets text color */
	text-decoration: underline;
	color: darkblue;
}
/* The anchor hover state */
a:hover {
	/* Makes text decoration to none, sets text color, and makes text bold */
	text-decoration: none;
	color: darkred;
	font-weight: bold;
}
/* The anchor active state */
a:active {
	/* Adds wavy underline in dark red and bold text */
	text-decoration: wavy darkred underline;
	font-weight: bold;

}
/* The footer selector*/
footer {
	/* Centers the text*/
	text-align: center;
}