/* CSS Style Sheet for Homework #6

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

     Assignment Notes:  Homework #6, I went with the blank CSS file again and added in pieces as I wanted to keep the same (like the links, @font-face, footer validation styling, etc)


*/

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

/* 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/pinetrees.jpg) repeat;
}
/* ============================= */

/* 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;
     /* adding a transition for color to the background color of this header */
     /* NOTE: IT TESTS OUT ON CHROME BUT NOT FIREFOX */
     transition: background-color 5s ease-in-out;

}
/* heading 2 for first paragraph header */
h2 {
     color: #0000ff; /* blue */
     font-family: 'MyWebFont', "Comic Sans MS", "Century Gothic", 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 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;
}
/* ============================= */


/* ID's CREATED /*
/* 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;
}
/* id tag created for transformation table */
#tabletransform {
     width: 50%;
     padding: .5em;
     /* centering the table */
     margin-left: auto;
     margin-right: auto;
     position: relative;
}
/* ============================= */

/* CLASSES CREATED */
/* 2D and 3D Transformation Classes */
/* 2D transformation - skew 15 degrees one way and then the other */
.skew {
     transform: skew(15deg);
}
.skew2 {
     transform: skew(-15deg);
}
/* I had fun with this one for where I put it.  LOL. Enjoy */
.rotate180 {
     transform: rotate(180deg);
}
/* 3D transformation */
.threed {
     transform-style: preserve-3d;
     perspective-origin: 50% 50%;
     backface-visibility: visible;
     transform: perspective(900px) scale3d(.75,1,.75) rotate3d(5,10,15,25deg);
}

/* link anchor tag styles, uniform with the rest of the site */
/* 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 */
}
/* ============================= */