/*
Filename: Homework Week 5 CSS 
Author:Rachel Lincoln 
Description: Utilizing CSS for positioning, styling, controlling overflow and using
block elements
*/

/*Adding body styling*/
body{
    background-image: url(images/cpencils.jpg);
    background-repeat: no-repeat;
    background-position:left;
}

/*changing the normal link appearance for readability  */

    a{
        color:slategray;
        text-decoration: underline;
    }
  

/*Adding h1 styling*/
h1{
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color:greenyellow;
    font-size: 56px;
    font-weight: 900;
    text-align: center;
    text-decoration: underline;
}

/*Adding h2 styling*/
h2{
    font-family: cursive;
    color: yellow;
    font-size: 32px;
    font-weight: 600;
    text-align: center;
}

/*1st block elements hr using ID */
#hr{
    border: 5px groove green;
    
}
#hr2{
    border: 7px groove orange;

}


/* #5 Creating 3 block level elements using div tag w ID and class of width and height */


.words{
    border: 5px dotted green; /* #7 - adding class and border styling*/

}

 /*1st block */
#left{
    text-align: left;
    color:blue;
    background-color: white; /*#8 add background color*/
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-weight: 900;
    font-size: 18px;
    width:300px;/* #6 width and height */
    height:300px;
    margin:5px; /*#9 adding margin*/
    float:inherit; /*#10 adding float*/
    overflow:auto; /*#12 adding different overflow options*/
    padding:5px; /*#13 adding padding*/
    position:relative; /* #14 adding position */
    object-position: left; /* #14 adding position of each box */
    opacity: 0.7; /* #16 setting opacity of each box */
    box-shadow: 5px 10px dodgerblue; /*#17 setting box shadow */
}

/*2nd blcok */
#center{
    text-align:center;
    color: red;
    background-color: white; /*#8 add background color*/
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-weight: 900;
    font-size: 18px;
    width:300px;  /* #6 width and height */
    height:300px;
    margin: 5px; /*#9 adding margin*/
    float:inherit; /*#10 adding float*/
    overflow: visible; /*#12 adding different overflow options*/
    padding:5px; /*#13 adding padding*/
    position:relative; /* #14 adding position */
    object-position: center; /* #14 adding position of each box */
    opacity: 0.7; /* #16 setting opacity of each box */
    box-shadow: 5px 10px hotpink; /*#17 setting box shadow */
}

/*3rd block*/
#right{
    text-align:right;
    color:purple;
    background-color:white; /*#8 add background color*/
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-weight: bold;
    font-size: 18px;
    width:300px; /* #6 width and height */
    height:300px;
    margin:5px; /*#9 adding margin*/
    float:inherit; /*#10 adding float*/
    overflow:hidden; /*#12 adding different overflow options*/
    padding:5px; /*#13 adding padding*/
    position:relative; /* #14 adding position */
    object-position:right; /* #14 adding position of each box */
    opacity: 0.7; /* #16 setting opacity of each box */
    box-shadow: 5px 10px violet; /*#17 setting box shadow */
}

footer{
    text-align: right;
    font-weight: 600;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color:black;

}