/* 
   styles.css
   Author: Rich Robichaud
   Course: ITWP 1050
   Assignment: Project 2 - Colorado Newsletter Styling
*/

/* Global variable using root selector */
:root {
  --blackColor: #000000;
}

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

/* Paragraph styles */
p {
  text-indent: 1em;
  line-height: 1.5em;
  font-size: 1.5vw;
}

/* Web font setup */
@font-face {
  font-family: 'Title Font';
  src: url('webfonts/AmaticSC-Bold.ttf');
  font-style: normal;
}

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

/* H2 styling with background image, shadows, and other properties */
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;
}

/* H3 styling with border-bottom shorthand property */
h3 {
  font-variant: normal;
  padding: 5px;
  font-size: 2vw;
  border-bottom: 2px solid var(--blackColor);
}

/* H4 element styling */
h4 {
  font-variant: normal;
  padding: 5px;
  font-size: 1.75vw;
}

/* H5 element styling */
h5 {
  font-style: italic;
  color: DarkSlateGray;
  font-size: 1vw;
}

/* Image styles - general image styling */
img {
  float: right;
  margin: 0 15px 15px 15px;
  border: 1px solid var(--blackColor);
}

/* Class for the state flag - specifically placed on the left */
.stateflag {
  float: left;
  border: 1px inset white;
  margin: 5px 15px 10px 0;
  box-shadow: 0px 3px 3px 1px var(--blackColor);
}

/* Class for highlighted sections - white background boxes */
.highlightSection {
  padding: 10px;
  background-color: white;
  box-shadow: 1px 1px 2px 1px SteelBlue;
}

/* Class for copyright information */
.copyright {
  font-size: 9px;
  font-style: italic;
  text-align: center;
  padding: 10px;
}

/* List item styles */
ul li {
  line-height: 1.5em;
  font-size: 1.5vw;
}

/* ID for validation links */
#validation {
  text-align: center;
  font-size: 11px;
}

/* Link pseudo-classes */
a {
  text-decoration: underline;
  color: var(--blackColor);
}

a:link {
  text-decoration: underline;
  color: var(--blackColor);
  font-weight: bold;
}

a:visited {
  text-decoration: underline;
  color: darkBlue;
}

a:hover {
  text-decoration: none;
  color: DarkRed;
  font-weight: bold;
}

a:active {
  text-decoration: underline wavy DarkRed;
  font-weight: bold;
}