/* CSS Style Sheet for Homework #2 

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

     Assignment Notes:  I started the CSS for Homework #5 with pretty much a blank css file.  I decided that I will add things in from my other CSS files as I wish them instead of deleting what I don't want this time.  I don't want to have to worry about missing a parent tag affecting something that I'm trying to do.  I added a bit more break up styling to the CSS by adding dividing lines between sections or types of tags in comment tags.  The more I keep adding to the CSS, I want to be able to visually pinpoint the areas or sections for future updating.  This is something I will continue to do with my own pages in the future.


*/

/* I kept the webfont below to keep it uniform with the rest of 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;
}
/* ============================= */


/* Classes for boxes */
/* boxes3 class is for requirements on homework #5 */
.boxes3 {
     display: block;
     width: 300px;
     height: 300px;
     border: 4px dashed rgba(76,103,0,255); /* dirty/olive green */
     margin: 3px;
     padding: 3px;
     overflow: auto;
     box-shadow: 7px 7px 3px rgba(0,0,0,50), 
     -5px -5px 3px rgba(0,0,0, 50);
}
/* ============================= */

/* SECTION FOR ALL ID TAGS */
/* id's for 3 boxes for homework 5 requirement */
#march {
     float: left;
     position: relative;
     top: auto;
     background: rgba(102,255,102,255); /* light/minty green */
     /* half opaque */
     opacity: .5;
}
#may {
     float: right;
     position: relative;
     top: auto;
     background: rgba(102,255,102,255); /* light/minty green */
     /* fully opaque */
     opacity: 1.0;
}
#april {
     margin-left: auto;
     margin-right: auto;
     position: relative;
     top: auto;
     background: rgba(102,255,102,255); /* light/minty green */
     /* three quarters opaque */
     opacity: .75;
}
/* id tag created for dislaimer/footnote before validation line */
/* This is one used throughout the site */
#footnote {
     color: #000000;
     font-size: .75em;
     text-align: center;
}
/* ============================= */

/* Navigation Text Menu at the top of the pages under the header */
nav {
     text-align: center;
     font-size: 1em;
}
/* ============================= */

/* styling to create a header like area within the box elements without it adding all the spaces that header tags do */
article {
     font-family: MyWebFont, "Comic Sans MS", "Century Gothic", Arial, Helvetica, sans-serif;
     color: #000000; /* black */
     text-align: center;
     font-size: 2em;
     padding: 2px;
     border: 2px double rgba(76,103,0,255); /* dirty/olive green */
     background-color: #ffffff; /* white */
     font-weight: bold;
     /* adding letter, word and line spacing on h2 */
     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(76,103,0,.3), -2px -2px rgba(76,103,0,.3); /* dirty/olive green */
     /* adding text case, using text-transform, to uppercase as well */
     text-transform: uppercase;
     /* adding a shadow to the month heading box */
     box-shadow: 5px 5px 3px rgba(76,103,0,50), 
     -5px -5px 3px rgba(0,0,0, 50);
}
/* ============================= */

/* 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: #000000; /* black */
     text-align: center;
     font-size: 2.5em;
     padding: 10px;
     border: 5px double rgba(76,103,0,255); /* dirty/olive green */
     background-color: #ffffff; /* 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 6 style, I like to use with the footer element */
h6 {
     color: green; /* green */
     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;
}
/* ============================= */

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