@charset "utf-8";
/* CSS Document */
/* style.css David Prifti, ITWP 1050, Designing a newsletter with CSS */


/* Global variable for black */
:root {
  --blackColor: #000000; /* Hex code for black */
}


/* Font face for a custom font */
@font-face {
	font-family: "Title Font";
	font-style:normal;
	font-weight: 200;
	src: url("webfonts/AmaticSC-Bold.ttf");
}


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


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


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



/* These are the styles for the h2 tag */
h2 {
  background: url('images/coloradomountains_bkgd.jpg') center/cover repeat;
  color: white;
  text-shadow: 1px 1px 5px var(--blackColor);
  padding: 25px;
  border: 2px inset var(--blackColor);
  font-variant: small-caps;
  box-shadow: 5px 10px 2px -2px #336699 inset;
  font-size: 3vw;

}




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




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




/* These are the stlyes for the h5 tag */
h5 {
  font-style: italic;
  color: DarkSlateGray;
  font-size: 1vw;
}




/* These are the iamge styles */
img {
  float: right;
  margin: 0 15px 15px 15px;
  border: 1px solid var(--blackColor); 
}




/* These are the stateflag class styles */
 .stateflag {
  float: left;
  border: 1px inset white;
  margin: 5px 15px 10px 0; 
  box-shadow: 0px 3px 3px 1px var(--blackColor); 
}




/* These are the highlightsection class styles */
.highlightSection {
  padding: 10px;
  background-color: white;
  box-shadow: 1px 1px 2px 1px SteelBlue;
}




/* These are the stlyes for the copyright class */
.copyrigth {
  font-size: 9px;
  font-style: italic;
  text-align: center;
  padding: 10px;
}




/* These are the stlyes for the list */
ul li {
  line-height: 1.5em;
  font-size: 1.5vw;
}





/* These are the stlyes for the validation ID */
#validation {
  text-align: center;
  font-size: 11px;
}





/* Styles for the a pseudo-class */
a:first-child {
  text-decoration: underline;
  color: var(--blackColor);
}





/* These are the styles for the pseudo-class a:link */
a:link {
  text-decoration: underline;
  color: var(--blackColor);
  font-weight: bold;
}





/* These are the styles for the pseudo-class a:visited */
a:visited {
  text-decoration: underline;
  color: darkBlue;
}




/* Styles for the pseudo-class a:hover */
a:hover {
  text-decoration: none;
  color: DarkRed;
  font-weight: bold;
}




/* These are the styles for the pseudo-class a:active */
a:active {
  text-decoration: underline wavy DarkRed;
  font-weight: bold;
}