* {
    box-sizing: border-box;
  }

body{
    margin:0 0 0 0;
    position: relative;
    min-height:100vh;
}

a {
    color: #777777;  
    text-decoration: none;
 }
 
header{
    font-family: "Georgia", Times, Times New Roman, serif;
    overflow: auto;
    background-color: #ffffff;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
}

#top{
    margin: auto;
    width:960px;
    text-align: center;
}

#myName{
    padding:20px 0 20px 0;
    background-color: #4aaaa5;
    color:white;
    font-size: 25px;
    font-weight:bold;
    width:20%;
    float:left;
}

#about,
#portfolio,
#contact {
    margin:20px 0 20px 0;
    float:right;
    width:10%;
    border-right: 1px solid #cccccc;
}

main{
    font-family:'Arial', 'Helvetica Neue', Helvetica, sans-serif;
    text-align: left;
    background-image: url(../images/gravel.png);
    height:100%;
    /* background-repeat: repeat; */
    padding: 30px 0 100px 0;
    
}

h1{
    color:#4aaaa5;
    font-size: 25px;
}


#content{
    clear:both;
    padding:10px 10px 10px 10px;
    border: 1px solid #dddddd;
    background-color: white;
    width:960px;
    margin:auto;
    overflow: auto;
}

footer{
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 20px 0 0 0;
    width: 100%;
    border-top: solid 10px #4aaaa5;
    background-color: #666666;
    margin:auto;
    text-align: center;
    font-size: 15px;
    font-family:'Arial', 'Helvetica Neue', Helvetica, sans-serif;
}

/*Index page css*/

#myPic {
    padding:0 20px 0 0;
    float:left;
}

#paragraph
#form {
    color: #777777;
}

/*Contact page css*/

button {
    margin:10px 0 10px 0;
    background-color: #4aaaa5;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

/*Protfolio page css*/

#portfoliopicarea {
    width:60%;
    text-align: center;
    margin:auto;
}

#description1,
#description2,
#description3,
#description4,
#description5,
#description6 {
    /* padding:10px 0 10px 0; */
    position:relative;
    top:-100px;
    background-color: #4aaaa5;
    color: #cccccc;
    width: 200px;
    height:40px;
    z-index:1;
    text-align: center;
}

#explain1,
#explain2,
#explain3,
#explain4
{
    /* padding:10px 0 10px 0; */
    position:relative;
    top:-80px;
    background-color: #4aaaa5;
    color: #cccccc;
    width: 200px;
    height:40px;
    text-align: center;
}

#portfoliopic1,
#portfoliopic2,
#portfoliopic3,
#portfoliopic4,
#portfoliopic5,
#portfoliopic6 {
    padding: 10px 10px 10px 0;
    margin-right: 20px;
    float:left;
    z-index:-1
}