/* CSS Style Sheet for Homework #2 

     Course Name: ITWP 1050 CSS
     Assignment: Homework #3
     
     Author: Edith Harvey
     Date: 11/1/20

     Assignment Notes:  Homework3.css is tailored for a winter there.  I am adjusting the headers as necessary throughout the homework3.html and .css pages.


*/

/* webfont cagliostro-regular being added to the page, sans-serif style font from font.squirrel.com */
/* as noted from text, added fonts should be first in style sheets */
@font-face {
     font-family: 'MyWebFont';
     src: url('fonts/cagliostro-regular-webfont.eot');
     src: url('fonts/cagliostro-regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/cagliostro-regular-webfont.woff') format('woff'), url('fonts/cagliostro-regular-webfont.svg') format('svg'), url('fonts/cagliostro-regular.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
     font-variant: normal;
}

/* body main style, sets up text color, font sizes and types */
/* Trying out the new font I downloaded for project 1 CSS to this HW assignment too. I like it */
body {
     font-family: "Comic Sans MS", "Century Gothic", Arial, Helvetica, sans-serif;
     font-size: 12px;
     color: #000000 /* black text */;
     background: #CCC url(images/water1920.jpg) repeat;
}

nav {
     text-align: center;
     font-size: 1em;
}

main {
     /* adding a background that repeats across the top of the screen */
     background: #cccccc url(images/pinetrees.jpg) repeat;
}

p {
     text-indent: 2.5em;
     line-height: 1.50em;
     text-align: justify;
}


/* All headers used in this assignment */ 
/* heading 1 style, main headers and titles */
h1 {
     font-family: MyWebFont, "Comic Sans MS", "Century Gothic", Arial, Helvetica, sans-serif;
     color: #0000ff; /* blue */
     text-align: center;
     font-size: 2.5em;
     padding: 10px;
     border: 5px double #0000ff; /* blue */
     background-color: #00ffff; /* white */
     font-weight: bold;
     /* adding letter, word and line spacing on h1 */
     letter-spacing: -.05em;
     word-spacing: .25em;
     line-height: 1.5em;
     /* adding above and below text shadow as well as this is the page header in a box */
     text-shadow: 4px 4px rgba(0,0,255,.3), -2px -2px rgba(0,0,255,.3); /* blue */
     /* adding text case, using text-transform, to uppercase as well */
     text-transform: uppercase;

}
/* heading 2 for first paragraph header */
h2 {
     color: #0000ff; /* blue */
     font-family: MyWebFont, Arial, Helvetica, sans-serif;
     text-align: left;
     font-weight: bold;
     font-size: 1.5em;
     /* adding letter, word and line spacing */
     letter-spacing: -.05em;
     word-spacing: .25em;
     line-height: 2em;
     /* adding text case, using text-transform, to uppercase as well */
     text-transform: uppercase;
}
/* heading 3 for second paragraph header */
h3 {
     color: #0000ff; /* blue */
     font-family: MyWebFont, Arial, Helvetica, sans-serif;
     text-align: left;
     font-weight: bold;
     font-size: 1.5em;
     /* adding letter, word and line spacing */
     letter-spacing: -.05em;
     word-spacing: .25em;
     line-height: 2em;
     /* adding text case, using text-transform, to uppercase as well */
     text-transform: uppercase;
}
/* heading 4 for third paragraph header */
h4 {
     color: #0000ff; /* blue */
     font-family: MyWebFont, Arial, Helvetica, sans-serif;
     text-align: left;
     font-weight: bold;
     font-size: 1.5em;
     /* adding letter, word and line spacing */
     letter-spacing: -.05em;
     word-spacing: .25em;
     line-height: 2em;
     /* adding text case, using text-transform, to uppercase as well */
     text-transform: uppercase;
}
/* heading 5, for fourth paragraph header */
h5 {
     color: #0000ff;
     font-family: MyWebFont, Arial, Helvetica, sans-serif;
     text-align: left;
     font-variant: small-caps;
     font-weight: bold;
     font-size: 1.50em;
     /* adding letter, word and line spacing */
     letter-spacing: -.05em;
     word-spacing: .25em;
     line-height: 2em;
     /* adding text case, using text-transform, to uppercase as well */
     text-transform: uppercase;
}
/* heading 6 style, I like to use with the footer element */
h6 {
     color: #00ffff; /* light blue */
     font-style: italic;
     text-align: center;
     font-size: .75em;
     font-weight: bold;
     /* adding letter, word and line spacing */
     letter-spacing: -.05em;
     word-spacing: .25em;
     line-height: 1em;
     /* adding text case, using text-transform, to uppercase as well */
     text-transform: uppercase;
}

/* title id tag for under header and image */
#title {
     color: #0000ff; /* blue */
     font-size: 2em;
     text-align: center;
     font-family: MyWebFont, Arial, Helvetica, sans-serif;
     /* adding above and below text shadow as well as this is the page header in a box */
     text-shadow: 2px 2px rgba(0,255,255,.3), -2px -2px rgba(0,255,255,.3); /* light blue */
}

/* id tag created for dislaimer/footnote before validation line */
#footnote {
     color: #000000;
     font-size: 1em;
     text-align: center;
}

/* IMAGE STYLING Variations */
/* all img tags have a border */
img {
     border: double #000000; /* black */
}
/* Specific class to center an img but not all images */
.imgcenter {
     display: block;
     margin-left: auto;
     margin-right: auto;
}
/* for those images that are centered, but I don't want a border on. */
.imgcenternobox {
     border: none;
     margin-left: auto;
     margin-right: auto;
}

/* link anchor tag styles */
/* all links before clicked */
a {
     color: #333399; /* dark blue */
     text-decoration: underline;
}
a:link {
     color: #333399; /* dark blue */
     text-decoration: underline;
     font-weight: bold;
}
/* visited link style */
a:visited {
     color: #333399; /* dark blue */
     text-decoration: none;
}
/* hovering over link style */
a:hover {
     color: #009900; /* dark green */
     font-size: 150%
}
a:active {
     text-decoration: none;
     color: #0000FF; /* blue */
}