/* Author: Guilherme Modelli
   Course: ITWP 1050
   Assignment: Project2
*/

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

/* Font-face rule to set AmatiSC for the title font */
@font-face {
    font-family: 'Title Font'; 
    src: url('./webfonts/AmaticSC-Bold.ttf') format('truetype'); 
    font-style: normal; 
}

/* Rule for body style */
body {
    font-family: Arial, Helvetica, sans-serif; 
    background-color: rgba(102, 204, 255, 0.4); 
}

/* rule set for paragraph style */
p {
    text-indent: 1em; 
    line-height: 1.5em; 
    font-size: 1.5vw; 
}

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

/* Element selector for h2 */
h2 {
    background: url('./images/coloradomountains_bkgd.jpg') center repeat; 
    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; 
}

/* Element selector for h3 */
h3 {
    font-variant: normal; 
    padding: 5px; 
    font-size: 2vw; 
    border-bottom: 2px solid var(--blackColor); 
}

/* Element selector for h4 */
h4 {
    font-variant: normal; 
    padding: 5px; 
    font-size: 1.75vw; 
}

/* Element selector for h5 */
h5 {
    font-style: italic; 
    color: DarkSlateGray; 
    font-size: 1vw; 
}

/* Element selector for image */
img {
    float: right; 
    margin: 0 15px 15px 15px; 
    border: 1px solid var(--blackColor); 
}

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

/* Creation of highlightSection class */
.highlightSection {
    padding: 10px; 
    background-color: white; 
    box-shadow: 1px 1px 2px 1px SteelBlue; 
}

/* Creation of copyright class */
.copyright {
    font-size: 9px; 
    font-style: italic; 
    text-align: center; 
    padding: 10px; 
}

/* Element selector for ul li */
ul li {
    line-height: 1.5em; 
    font-size: 1.5vw; 
}

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

/* Pseudo-class name a */
a {
    text-decoration: underline; 
    color: var(--blackColor); 
}

/* Pseudo-class for unvisited sites */
a:link {
    text-decoration: underline; 
    color: var(--blackColor); 
    font-weight: bold; 
}

/* Pseudo-class for visited sites */
a:visited {
    text-decoration: underline; 
    color: darkBlue; 
}

/* Pseudo-class for hover state */
a:hover {
    text-decoration: none; 
    color: DarkRed; 
    font-weight: bold; 
}

/* Pseudo-class for activated state */
a:active {
    text-decoration: underline wavy DarkRed; 
    font-weight: bold; 
}