/*CSS Project 2
    Author: Shutran, Marcus 0612328
    Date: 04/19/2026
    Filename: styles.css
    */

/* Global Variable */

:root {
    --blackColor: #000000;
    --main-border-color: black;
    --border-color: black;
    --main-color: #3498db; /* Example color value */
}

/*web font rules*/

@font-face {
    font-family: 'Title Font';
    src: url('webfonts/AmaticSC-Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: normal; /* Added for consistency */
}

/* Body Rule */

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgba(102, 204, 255, .4);
}

/* Paragraph Rule */

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

footer {
    text-align: center;
}

/*h1 Selector*/

h1 {
    /* a. Set font stack with webfont */
    font-family: 'AmaticSC-Regular.tff', Arial, Helvetica, sans-serif;

    /* b. Add font size of 7vw */
    font-size: 7vw;

    /* c. Add text shadow (h-Offset v-Offset blur color) */
    text-shadow: 1px 1px 4px #336699;
}

/*Creating h2 Selector*/

h2 {
    /* a. Background shorthand: image, repeat, and center position */
    background: url("images/coloradomountains_bkgd.jpg") repeat center;

    /* b. Text color */
    color: #ffffff;

    /* c. Text shadow using root variable (assuming variable name is --root-color) */
    text-shadow: 1px 1px 5px var(--root-color);

    /* d. Padding on all four sides */
    padding: 25px;

    /* e. Border shorthand: 2px width, root variable color, and inset style */
    border: 2px inset var(--root-color);

    /* f. Font variant */
    font-variant: small-caps;

    /* g. Box shadow: h-offset, v-offset, blur, hex color, and inset */
    box-shadow: inset 5px 10px 20px #336699;

    /* h. Font shorthand including 3vw size (requires a font-family to be valid) */
    font: small-caps 3vw sans-serif;
}

/*h3 Selector*/

h3 {
    font-variant: normal;
    padding: 5px;
    font-size: 2vw;
    border-bottom: 2px solid var(--main-border-color);
}

/*h4 Selector*/

h4 {
    font-variant: normal; /* Sets font variant to normal */
    padding: 5px;         /* Adds 5px padding on all four sides */
    font-size: 1.75vw;    /* Sets font size to 1.75 viewport width units */
}

/*h5 Selector*/

h5 {
    font-style: italic;
    color: DarkSlateGray;
    font-size: 1vw;
}

/* 2. Target the image element */

img {
    float: right; /* a. Floats to the right */
    margin: 0 15px 15px 15px; /* b. Margin: top (0), right (15px), bottom (15px), left (15px) */
    border: 1px solid var(--border-color); /* c. 1px solid border using the root variable */
}

.stateflag {
    float: left;
    border: 1px inset #ffffff;
    margin: 5px 15px 10px 0;
    box-shadow: 0px 3px 3px 1px var(--border-color);
}

.highlightSection {
    padding: 10px;                /* Padding on all four sides */
    background-color: white;     /* White background color */
    box-shadow: 1px 1px 2px 1px SteelBlue; /* 1px, 1px, 2px, 1px, SteelBlue */
}

.copyright {
    font-size: 9px;
    font-style: italic;
    text-align: center;
    padding: 10px;
}

ul li {
  line-height: 1.5em;
  font-size: 1.5vw;
}

#IDvalidation {
    text-align: center;
    font-size: 11px;
}

/* The first pseudo-class for the 'a' tag is often :link */
a {
  text-decoration: underline;
  color: var(--main-color);
}

link {
  text-decoration: underline;
  color: var(--main-color); /* Replace --main-color with your specific root variable name */
  font-weight: bold;
}

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

hover {
  text-decoration: none;    /* a. Remove decoration */
  color: DarkRed;           /* b. Set color */
  font-weight: bold;        /* c. Set bold */
}

active:last-of-type {
  text-decoration: underline wavy DarkRed;
  font-weight: bold;
}