/* CSS Style Sheet for Homework #1 and #2 

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

     Assignment Notes: I am using the base site for Homework #1 and #2.  For Homework #3, I added an additional page to the site, and all of the new CSS in homework3.css will be focused on that site.

     Because I didn't quite like some of the features that I added to the site for Homework 2, I created a new page for homework 2, and I titled that one homework2.html.  The original site for Homework 1 is now the index.html for the site.


*/

/* 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 */
}

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

/* 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: #009900; /* darker green */
     text-align: center;
     font-size: 2.5em;
     padding: 10px;
     border: 5px double #ff9900; /* orange */
     background-color: #000000; /* black */
     font-variant: small-caps;
     font-weight: bold;
}
/* heading 2 for first paragraph header */
h2 {
     color: green;
     font-family: MyWebFont, Arial, Helvetica, sans-serif;
     text-align: left;
     font-variant: small-caps;
     font-weight: bold;
     font-size: 1.75em;
}
/* heading 3 for second paragraph header */
h3 {
     color: orange;
     font-family: MyWebFont, Arial, Helvetica, sans-serif;
     text-align: left;
     font-variant: small-caps;
     font-weight: bold;
     font-size: 1.5em;
}
/* heading 4 for third paragraph header */
h4 {
     color: red;
     font-family: MyWebFont, Arial, Helvetica, sans-serif;
     text-align: left;
     font-variant: small-caps;
     font-weight: bold;
     font-size: 1.25em;
}
/* heading 5, for fourth paragraph header */
h5 {
     color: brown;
     font-family: MyWebFont, Arial, Helvetica, sans-serif;
     text-align: left;
     font-variant: small-caps;
     font-weight: bold;
     font-size: 1.10em;
}
/* heading 6 style, I like to use with the footer element */
h6 {
     color: #009900; /* darker green */
     font-style: italic;
     text-align: center;
     font-size: .75em;
     font-weight: bold;
     font-variant: small-caps;
}

/* styling all descendants of the paragraph tag to bold */
/* I thought it was p * but nothing changed unless I did it as * p */
* p {
     font-size: 14px;
     font-weight: bold;
}
/* styling all paragraph siblings to make the second paragraph grey text */
p + p {
     color: #cccccc; /* grey */
}

/* trying style for the first letter and the first line of text of the first paragraph */
/* would not go by main span for the tags.  So, I added a div tag to the first paragraph to point to */
main div:first-of-type::first-letter {
     color: red;
     font-size: 25px;
     background-color: yellow;
}
main div:first-of-type::first-line{
     background-color: orange;
}

/* Coloring each paragraph a different color of fall */
/* Each paragraph gets smaller font to simulate things going down */
.paragraph01 {
     color: green;
     font-size: 1.5em;
}
.paragraph02 {
     color: orange;
     font-size: 1.3em;
}
.paragraph03 {
     color: red;
     font-size: 1.15em;
}
.paragraph04 {
     color: brown;
     font-size: 1em;
}

/* title id tag for under header and image */
#title {
     color: chocolate;
     font-size: 2em;
     text-align: center;
     font-family: MyWebFont, Arial, Helvetica, sans-serif;
}

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

/* IMAGE STYLING Variations */
/* only created this per class regulations, It doesn't fit the border separator image I had on the site.  So, I will remove it later. */
img {
     border: double #000000; /* black */
}
/* Specific class to center an img but not all images */
.imgcenter {
     display: block;
     margin-left: auto;
     margin-right: auto;
}
.imgcenternobox {
     border: none;
     margin-left: auto;
     margin-right: auto;
}

/* link anchor tag styles */
/* all links before clicked */
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 */
}