#p5Div {
  /*display: inline-block;*/
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  z-index: 0;
}

#sketch1 {
  background: #1B1B1E;

  position: absolute;
  top:0px;
  left:0px;
  z-index: -1;
  height:100vh;
}

/*#sketch2 {
  position: relative;
  top:0px;
  left:0px;
  z-index: -1;
}*/

p {
  line-height: 2;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /*text-align: center;*/
  height: 100%;
  padding: 0px;
  margin: auto;
  color:white;
}

.flex_body {
  display: flex;
  flex: 1;
  background:  #1B1B1E;
}

.main_content {
  flex: 1;
  z-index: 3;
}
.columns {
  flex: 0 0 12em;
  background:  #292724;
  height:100vh;
}
.column_left {
  order: -1;
}

header, footer {
  background: #1B1B1E;
  color: #fff;
  padding: 10px;
}


header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 70px;
  text-align: center;

  /*display:inline-block;*/

}

footer a {
  flex: 1;
}
h1 {
  margin: 0;
  font-size: 15px;

}

html,body {
  height: 100%;
  margin: 0;
  font-family: Helvetica;
}

li {
  text-decoration: none;
  list-style-type: none;
}

ul {
    display: inline-flex;
}
ul a {
  text-decoration: none;
  color: #fff;
  padding: 20px;
  position: relative;
  left:-120px;
  /*padding-left: 0px;*/
  line-height: 2px;
  transition: 0.5s ease-in-out;
}

.draw {
  position: relative;
  left:-100px;

}

ul a:hover {
  color:#58A4B0;
}

.menulink {
  position: relative;
  left:-120px;
}



active {
  color:#58A4B0;
}


/*layout sections*/

#home {
   /*background: #1B1B1E;*/
   padding-top: 96px;
   /*padding-bottom: 66px;*/
   /*overflow: hidden;*/
   height:100vh;
   text-align: center;
   z-index: 400;
}

#home h1 {
  padding:40px;
  font-size:70px;
  /*font-size:6vw;*/
}

/*.linkd {*/
  /*width:40px;
  height:40px;*/
  /*background-image: url("images/linkdinwhite.png");*/
  /*transition: 0.5s ease-in-out;
  position: relative;*/
  /*left:5px;*/
/*}*/

.github, .twitter, .linkd {
  width:30px;
  height:30px;
  transition: 0.5s ease-in-out;
}

.menulink {
  width:25px;
  height:25px;
  /*display:fix;*/
  /*right:100px;*/
}





.linkd:hover {
  transform: scaleX(1.1);
  background-image: url("images/linkdblue.png");
}



#about {
   background: #2F2F32;
   padding-top: 96px;
   padding-bottom: 66px;
   overflow: hidden;
   height:100vh;
   text-align:center;
}

#about p {
    color:#7A7A7A;
    line-height: normal;
}

.photo {
  width: 180px;
  height:200px;
  border-radius: 70%;
}



/*#about h2 {
  padding:40px;
}*/



#resume {
   background: #FFFFFF;
   padding-top: 96px;
   padding-bottom: 66px;
   overflow: hidden;
   height:200vh;
}

#resume {
  color:#1B1B1E;
}

#resume h2 {
  text-decoration: underline #58A4B0;
}



#portfolio {
   background: #1B1B1E;
   padding-top: 96px;
   padding-bottom: 66px;
   overflow: hidden;
   height:100vh;
   text-align: center;
}

#contact p {
  color:#7A7A7A;

}

/*#portfolio img {
  width:290px;
  height:180px;
}*/

#portfolio img {
  width:90%;
  height:60%;
}

#portfolio h2 {

  text-align: center;
}

.projs {
  cursor: pointer;
}

.projs:hover {
  color:#58A4B0;

}

.description {
  color:#1B1B1E;
}


#contact {
   background: #1B1B1E;
   padding-top: 96px;
   padding-bottom: 66px;
   overflow: hidden;
   height:50vh;
}

h1 {
  font-size: 100px;
  /*color:white;*/
}


@media all and (min-width: 960px) {
    body{
        font-size: 18px;
    }
}

@media all and (max-width: 959px) and (min-width: 500px) {
    body{
        font-size: 16px;
    }

    ul a {
      padding: 10px;
    }

    #resume {
      height:240vh;
    }

    .menulink {
      position: relative;
      left:0px;
      width:20px;
      height:20px;
    }
}

@media all and (max-width: 499px) and (min-width: 0px) {
    body{
        font-size: 10px;
    }

    ul a {
      padding: 5px;
    }

     h3 {
      font-size: 11px;
    }

    #home h1 {
      font-size: 50px;
    }

    #contact {
      height:80vh;
    }

    #portfolio {
      height:80vh;
    }

    #resume {
      height:250vh;
    }

    #about {
      height:110vh;
    }

    #contact h2 {
      font-size: 12px;
    }

    ul a, .draw {
      left:-40px;
    }

    #home {
      height:100vh;
    }

    .menulink {
      position: relative;
      left:-10px;
      padding:1px;
      width:10px;
      height:10px;
    }

    .github, .twitter, .linkd {
      height:20px;
      width:20px;
    }

    header {
      height:35px;
    }

    #portfolio img {
      width:90%;
      height:40%;
    }

    #portfolio h3 {
      font-size: 9px;
    }




}