/* 
  Name: Evan Jackovich
  Course: ITWP 1050
  Assignment: Project2
  Date: 4/13/2025
*/
/* section 1 step 4 (global)*/
:root {
  --blackColor: #000000;
}

/* section 1 step 5 (body)*/
body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: rgba(102,204,255,.4);
}


/* section 1 step 6(paragraph)*/
p {
  text-indent: 1em;
  line-height: 1.5em;
  font-size: 1.5vw;
}


/* section 1.1 step 2(webfonts)*/
@font-face {
  font-family: 'Title Font';
  src: url('webfonts/AmaticSC-Bold.ttf') format('truetype');
  font-style: normal;
}


/* section 1.2 step 1(h1)*/
h1 {
  font-family: 'Title Font', Arial, Helvetica, sans-serif;
  font-size: 7vw;
  text-shadow: 1px 1px 4px #336699;
}



/* section 1.2 step 2(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: inset 5px 10px 20px #336699;
  font-size: 3vw;
}

/* section 1.2 step 3(h3)*/
h3 {
  font-variant: normal;
  padding: 5px;
  font-size: 2vw;
  border-bottom: 2px solid var(--blackColor);
}


/* section 1.2 step 4(h4)*/
h4 {
  font-variant: normal;
  padding: 5px;
  font-size: 1.75vw;
}



/* section 1.2 step 5(h5)*/
h5 {
  font-style: italic;
  color: DarkSlateGray;
  font-size: 1vw;
}


/* section 1.3 step 1(image)*/
img {
  float: right;
  margin: 0 15px 15px 15px;
  border: 1px solid var(--blackColor);
}



/* section 1.4 step 1(stateflag)*/
.stateflag {
  float: left;
  border: 1px inset white;
  margin: 5px 15px 10px 0;
  box-shadow: 0px 3px 3px 1px var(--blackColor);
}

/* section 1.4 step 2(highlightsection)*/
.highlightSection {
  padding: 10px;
  background-color: white;
  box-shadow: 1px 1px 2px 1px SteelBlue;
}

/* section 1.4 step 3(copyright)*/
.copyright {
  font-size: 9px;
  font-style: italic;
  text-align: center;
  padding: 10px;
}


/* section 1.4 step 1(ul li)*/
ul li {
  line-height: 1.5em;
  font-size: 1.5vw;
}

/* section 1.4 step 2(ID)*/
#validation {
  text-align: center;
  font-size: 11px;
}


/* section 1.5 step 1(a)*/
a {
  text-decoration: underline;
  color: var(--blackColor);
}

/* section 1.4 step 2(link)*/
a:link {
  text-decoration: underline;
  color: var(--blackColor);
  font-weight: bold;
}


/* section 1.4 step 3(visited)*/
a:visited {
  text-decoration: underline;
  color: darkBlue;
}

/* section 1.4 step 4(hover)*/
a:hover {
  text-decoration: none;
  color: DarkRed;
  font-weight: bold;
}



/* section 1.4 step 5(active)*/
a:active {
  text-decoration: underline wavy DarkRed;
  font-weight: bold;
}