/* 
Filename: styles.css
Author: Jordan Wlash
Assignment: Colorado Monthly Newsletter - CSS Styling
*/

/* root selector creating a global variable */
:root {
 --blackColor: #000000;
}
/* font rule for web font */
@font-face {
  font-family: 'Title Font';
 src: url('webfonts/AmaticSC-Bold.ttf');
 font-style: normal;
}
/* styling for the body */
body {
font-family: Arial, Helvetica, sans-serif;
 background-color: rgba(102,204,255,.4);
}
/* styling for the paragraph */
p {
 text-indent: 1em;
 line-height: 1.5em;
 font-size: 1.5vw;
}
/* the heading styles */
/* Styling for h1 */
h1 {
  font-family: 'Title Font', Arial, Helvetica, sans-serif;
font-size: 7vw;
 text-shadow: 1px 1px 4px #336699;
}
/* Styling for h2 */
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;
}
/* Styling for h3 */
h3 {
 font-variant: normal;
 padding: 5px;
 font-size: 2vw;
 border-bottom: 2px solid var(--blackColor);
}
/* Styling for h4 */
h4 {
 font-variant: normal;
 padding: 5px;
 font-size: 1.75vw;
}
/* Styling for h5 */
h5 {
 font-style: italic;
 color: DarkSlateGray;
 font-size: 1vw;
}
/* styling for all images */
img {
 float: right;
 margin: 0 15px 15px 15px;
 border: 1px solid var(--blackColor);
}

/* the state flag image */
.stateflag {
 float: left;
 border: 1px inset white;
 margin: 5px 15px 10px 0;
 box-shadow: 0px 3px 3px 1px var(--blackColor);
}
/* the highlight section class */
.highlightSection {
 padding: 10px;
 background-color: white;
 box-shadow: 1px 1px 2px 1px SteelBlue;
}
/* the copyright class */
.copyright {
 font-size: 9px;
 font-style: italic;
 text-align: center;
 padding: 10px;
}
/* styling for list items */
ul li {
 line-height: 1.5em;
 font-size: 1.5vw;
}
/* validation ID */
#validation {
 text-align: center;
 font-size: 11px;
}

/* link style */
a {
 text-decoration: underline;
  color: var(--blackColor);
}
/* Unvisited link */
a:link {
 text-decoration: underline;
 color: var(--blackColor);
  font-weight: bold;
}
/* Visited link */
a:visited {
  text-decoration: underline;
 color: darkBlue;
}
/* Hover */
a:hover {
 text-decoration: none;
 color: DarkRed;
 font-weight: bold;
}
/* Active */
a:active {
 text-decoration: underline wavy DarkRed;
  font-weight: bold;
}