/** Screen size §selections **/
@media (min-width: 600px) { 
    body, html {
    width: 100%;
    height: 100%;
    }
}
@media (max-width: 599px) {
    body, html {
        width: 100%;
        height: 100%;
        }
} 


.container {
    width: 100%;
    height: 100%;
}

/**  Website layout set up **/ 
.header {
    margin:auto;
    width: 100%;
    height: auto;
    background-color: #fafad2;
}

.navigation {
    margin: auto;
    width: 100%;
    height:  auto;
    text-align:  center;
    background-color: #e6eea8;
    }

.content {
    float: left;
    margin:auto; 
    width: 100%;
	height: auto;
	background-color:#f0e68c;
}

.footer {
    margin:auto;
    float:left;
    width:100%;
    height: auto;
    background-color: #fafad2;
}

/** heading text formatting **/
h1 {     
    text-align: center;
    vertical-align: center;
    font-size: 3em;
    color: whitesmoke;
    text-transform: capitalize;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 
                    'Lucida Grande', 'Lucida Sans Unicode', 
                   'Geneva', 'Verdana', sans-serif;
    text-shadow:    1px 1px 1px darkgreen,
                    2px 2px 1px darkgreen;
}
h2 {    
    text-align: center;
    text-decoration: wavy;
    font-style: italic;
    vertical-align: center;
    font-size: 2.5em;
    color: #f0fff0;
    text-transform: capitalize;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 
                    'Lucida Grande', 'Lucida Sans Unicode', 
                   'Geneva', 'Verdana', sans-serif;
}
/** end of heading fortmattinng **/

/** formats text in main content area */
p {
    margin-left: 5%;
    margin-right: 5%;
    float: left;
    text-align: justify;
    font-size: 1.1em;
    color:#21421e;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.mylist  { 
    float:left; 
    margin-left: 10%;
    margin-right: 10%;
    text-align: justify;
    font-size: 1.1em;
    color: #21421e;
    list-style-type: square;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}  


/** end of main text formatting  **/


#mail {
    font-size: 1.1em;
    color: darkgreen;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 
    'Lucida Grande', 'Lucida Sans Unicode', 
    Geneva, Verdana, sans-serif;
} 
#headerpictl { 
    float: left;
    margin-top: 2.5%;
    margin-left: 2.5%;
    border: #f0fff0;
    height: 12.5%;
    width: 12.5%
}
#headerpictr {
    float: right;
    margin-top: 2.5%;
    margin-right: 2.5%;
    border: #f0fff0;
    height: 12.5%;
    width: 12.5%
}
#cptee {
    float: left;
    padding-right: 2.5%;
    padding-bottom: 2.5%;
    border: #f0fff0;
    height: 30%;
    width: 20%    
}
#linkedin {
    font-size: 1.1em;
    color:#21421e;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/** Hyperlink Manipulation **/
a {
    text-align: center;
    color: darkgreen;
    padding:  15px;
    font-size: 2em;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 
                    'Lucida Grande', 'Lucida Sans Unicode', 
                    Geneva, Verdana, sans-serif;
}


a:link {  /** the color of a unvisited link **/
    color: white;
}
a:hover { /** changes the background color for all hyperlinks when mouse hovers over link**/
        border: black;
        color: green;
        background-color: white;
    }
a:active { /** changes the appearence of the active link **/
        color: lawngreen;
        text-decoration: underline;
        background-color: white;
    }
a:visited {  /** changes the appearance of visited links  **/
        color:darkgreen;
        text-decoration:bold;
 }
/** end of hyperlink manipulation */