/* 
Filename: styles.css
Name: Christopher Millen
Course: ITWP 1050
Imfo: Style sheet for Colorado Newsletter
*/

/*root level styles for the color with a variable*/
:root{
	--blackColor: #000000;
}

/*importing web font into the styles*/
@font-face{
  font-family: 'Title Font';
  src: url('webfonts/AmaticSC-Regular.ttf') format('truetype');
  src: url('webfonts/AmaticSC-Bold.ttf') format('truetype');
  font-style: normal;
}

/*styles for the body of the page */
body{
	font-family: Arial, Helvetica, sans-serif;
	background-color: rgba(102, 204, 255, .4);
}

/*styles for paragraph of the page */
p{
	text-indent: 1em;
	line-height: 1.5em;
	font-size: 1.5vw;
}

/*styles for h1 of the page */
h1{
	font-family: 'Title Font', Arial, Helvetica, sans-serif;
	font-size: 7vw;
	text-shadow: 1px 1px 4px #336699;
}

/*styles for h2 of the page */
h2{
	background: url('images/coloradomountains_bkgd.jpg') repeat center;
	color: #FFFFFF;
	text-shadow: 1px 1px 5px var(--blackColor);
	padding: 25px;
	border: 2px inset var(--blackColor);
	font-variant: small-caps;
	box-shadow: inset 5px 10px 20px #336699;
	font: small-caps 3vw 'Title Font', sans-serif;
}

/*styles for h3 of the page */
h3{
  font-variant: normal;
  padding: 5px;
  font-size: 2vw;
  border-bottom: 2px solid var(--blackColor);
}

/*styles for h4 of the page */
h4{
  font-variant: normal;
  padding: 5px;
  font-size: 1.75vw;
}

/*styles for h5 of the page */
h5{
  font-style: italic;
  color: DarkSlateGray;
  font-size: 1vw;
}

/*styles for image of the page */
img{
  float: right;
  margin: 0 15px 15px 15px;
  border: 1px solid var(--blackColor);
}

/*stateflag class to style flag on page*/
.stateflag{
  float: left;
  border: 1px inset white;
  margin: 5px 15px 10px 0;
  box-shadow: 0px 3px 3px 1px var(--blackColor);
}

/*highlightsection class to style the important info on page*/
.highlightSection{
  padding: 10px;
  background-color: white;
  box-shadow: 1px 1px 2px 1px SteelBlue;
}

/*copyright class to style copyright section on page*/
.copyright{
  font-size: 9px;
  font-style: italic;
  text-align: center;
  padding: 10px;
}

/*styles for list items of the unordered list*/
ul li{
  line-height: 1.5em;
  font-size: 1.5vw;
}

/*validation id to style validation pargraph in footer*/
#validation{
  text-align: center;
  font-size: 11px;
}


/*styles for link on page*/
a{
  text-decoration: underline;
  color: var(--blackColor);
}

/*styles for link on page*/
a:link{
  text-decoration: underline;
  color: var(--blackColor);
  font-weight: bold;
}

/*styles for link on page after clicked*/
a:visited{
  text-decoration: underline;
  color: darkBlue;
}

/*styles for link on page once mouse hoover */
a:hover{
  text-decoration: none;
  color: DarkRed;
  font-weight: bold;
}

/*styles for link on page that are clicked*/
a:active{
  text-decoration: underline wavy DarkRed;
  font-weight: bold;
}