/*  File Name: Styles.css
    Stylesheet created by Alexander Durkin
    Course: ITWP1050 Online 8 week.
    This CSS stylesheet is linked to project2 a newsletter about Colorado */

/* This is the global varible named blackColor */
:root {
    --blackColor: #000000;    
}
@font-face {
    /* Name is Title Font */
    font-family: 'Title Font';
    /* Specifies what font is used */
    src: url('webfonts/AmaticSC-Bold.ttf') format('truetype');
    /* Sets font style to normal */
    font-style: normal;
}
/* This is the body selector */
body {
    /* This controls the text font */
    font-family: Arial, Helvetica, sans-serif;
    /* Sets the background color to a blueish white */
    background-color: rgba(102, 204, 255, 0.4);
}
/* Contorls paragrpah elements */
p {
    /* Sets the indent of text */
    text-indent: 1em;
    /* Sets how far apart line of text are */
    line-height: 1.5em;
    /* Sets how big the font will be */
    font-size: 1.5vw;
}
/* Controls the header one elements */
h1 {
    /* Uses the Title Font name for Amatic-Bold font */
    font-family: 'Title Font', Arial, Helvetica, sans-serif;
    /* Font sizing */
    font-size:  7vw;
    /* Controls text shadow for h1 elements */
    text-shadow: 1px 1px 4px #336699;
}
/* Controls the header 2 elements */
h2 {
    /* Shorthand property for background, url. */
    background: url('images/coloradomountains_bkgd.jpg') repeat center;
    /* Sets color to white */
    color: white;
    /* Test shadow to h-Offest 1 pixel, v-Offset to 1 pixel, blue 5 pixels, varible root which is the color black */
    text-shadow: 1px 1px 5px var(--blackColor);
    /* Padding on all four sides */
    padding: 25px;
    /* Border shorthand, width 2 pixels, root specifies color, also added inset. */
    border: 2px inset var(--blackColor);
    /* Font will look like small caps */
    font-variant: small-caps;
    /* Box shadow h-Offset is 5 pixels, v-Offset is 10 pixels, blur of 20 pixels, hex code color value. */
    box-shadow: inset 5px 10px 20px #336699;
    /* Font size of 3vw */
    font-size: 3vw;
}
/* Controls the header 3 elements */
h3 {
    /* Sets the font variant to normal */
    font-variant: normal;
    /* Padding to 25 pixels */
    padding: 5px;
    /* Sets the font sizing of the h3 element */
    font-size: 2vw;
    /* sets the bottom border to 2 pixels, and used the root varible blackColor */
    border-bottom: 2px solid var(--blackColor);
}
/* Controls the header 4 elements */
h4 {
    /* Sets variant to normal */
    font-variant: normal;
    /* Adds a padding of 5 pixels */
    padding: 5px;
    /* Sets the font sizing of the h4 element */
    font-size: 1.75vw;
}
/* Controls the header 5 elements */
h5 {
    /* uses the italics font style */
    font-style: italic;
    /* Sets the color to dark grey */
    color:  DarkSlateGray;
    /* sets the font sizing to 1vw */
    font-size: 1vw;
}
/* This control the image elements, for styling purposes. */
img {
    /* Floats our image to the right */
    float: right;
    /* Sets the margin top to 0 pixels, right, bottom and left are 15 pixels */
    margin: 0 15px 15px 15px;
    /* Sets a border to 1 pixel, solid and referenced the blackColor varible */
    border: 1px solid var(--blackColor);
}
/* This is the class created for section 1.4 named stateflag */
.stateflag {
    /* Image is floated to the left */
    float: left;
    /* Has a border which is 1 pixel and inseted. */
    border: 1px inset white;
    /* Adds a margin to top, right and bottom, left has 0. */
    margin: 5px 15px 10px 0;
    /* Adds a box shadow and refernces the varible blackColor */
    box-shadow: 0px 3px 3px 1px var(--blackColor);
}
/* Class created for 1.4 #2 */
.highlightSection {
    /* Sets the padding to 10 pixels */
    padding: 10px;
    /* Sets the background color to white */
    background-color: white;
    /* Sets a box shadow and colors it SteelBlue */
    box-shadow: 1px 1px 2px 1px SteelBlue;
}
/* Class created for 1.4 #3 */
.copyright {
    /* Sets the font size to 9 pixels */
    font-size: 9px;
    /* Sets a font style to italics */
    font-style: italic;
    /* text alight center (obviously lol) */
    text-align: center;
    /* Padding fo 10 pixels */
    padding: 10px;
}
/* List element selectors for 1, A and B. */
ul li {
    /* Sets the line height to 1.5em */
    line-height: 1.5em;
    /* Sets our font sizing to 1.5vw */
    font-size: 1.5vw;
}
/* Contains the coding for the HTML and CSS validations */
#validation {
    text-align: center;
    font-size: 11px;
}
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;
  }
  
  /* Mouse is hovering over the link */
  a:hover {
    text-decoration: none;
    color: DarkRed;
    font-weight: bold;
  }
  
  /* Selected link */
  a:active {
    text-decoration: underline wavy DarkRed;
    font-weight: bold;
  }