/*font-family: 'Roboto', sans-serif;  400 or 700
font-family: 'Open Sans', sans-serif;*/


body{
  margin: 0;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  font-family: 'Roboto', sans-serif;
  color: rgba(0,0,0,0.8);
}

#world {
	position: fixed;
  top:0;
  left:0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
  z-index: -100;
}

#sign{
  position: fixed;
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Safari */
  transform: rotate(90deg);
  right:-80px;
  top:50vh;
  font-weight: bold;
  text-transform: uppercase;
  color: rgba(0,0,0,0.5);
  font-family: 'Roboto', sans-serif;
}

.signBottom{
  font-weight: bold;
  text-transform: uppercase;
  color: rgba(0,0,0,0.5);
  font-family: 'Roboto', sans-serif;
  margin-top:2em;
  display:none;
}

#menu{
  width:2.5em;
  position: fixed;
  right:4px;
  top:4px;
  display:none;
  z-index: 100;
}

.menuList{
  background-color: rgba(255,255,255,1);
  width: 100vw;
  height: 100vh;
  position: fixed;
  left:0;
  top:0;
  display:none;
  z-index:90;
  font-family: 'Roboto', sans-serif;
}

.display{
  display: flex;
  align-items: center;
  justify-content: center;
}

.menuList li, .menuList a{
  font-size: 1.2em;
  text-transform: uppercase;
  font-weight: bold;
  padding: 0.5em 0.5em;
  margin-bottom:1em;
  text-align: center;
  text-decoration: none;
  color: rgba(0,0,0,0.6);
  font-weight: bold;
  letter-spacing: 0.2em;
  list-style: none;
}

.menuList a:hover{
    color: rgba(0,0,0,0.8);
    border-bottom: 1px solid black;
}

nav{
  text-align: center;
  margin-top: 7px;
  font-family: 'Roboto', sans-serif;
}

.selectedNav{
  color: rgba(0,0,0,0.8);
  border-top: 3px solid rgba(0,0,0,0.8);
}

nav li{
  display: inline-block;
  font-size: 1em;
  text-transform: uppercase;
  font-weight: bold;
  padding: 0.5em 0.2em;
}

nav a{
  text-decoration: none;
  color: rgba(0,0,0,0.6);
  padding: 13px 10px 10px 10px;
  font-weight: bold;
  letter-spacing: 0.2em;
  list-style: none;
}

nav a:hover{
  color: rgba(0,0,0,0.8);
  border-top: 3px solid rgba(0,0,0,0.8);
}

header{
  width: 100vw;
  height: 40px;
  background-color: rgba(255,255,255,1);
  position: fixed;
  top:0;
  z-index:50;
}

.title{
  font-family: 'Roboto', sans-serif;
  font-size: 1.8em;
  letter-spacing: 0.1em;
  font-weight: bolder;
  color: rgba(0,0,0,0.6);
  max-width: 20em;
}

.name{
  font-family: 'Roboto', sans-serif;
  font-size: 4em;
  font-weight: bolder;
  letter-spacing: 0.1em;
  display: block;
  color:rgba(0, 245, 215, 1);
}

.pageWrapper{
  padding: 0 4em 0 3em;
  box-sizing: border-box;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  color: rgba(0,0,0,0.8);
}

#p1, #p2, #p3, #p5{
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em 1em 3em 1em;
  min-height:100vh;
}
.section{
    margin-right: -7em;
}

#p1{
  min-height: 100vh;
}

#p2{
  background-color: rgba(239, 241, 240, 0.3)

}
#p4{
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(239, 241, 240, 0.3);
  padding-top: 3em;
}

#p3{
  background-color: rgba(0, 245, 215, 0.3);
  padding-top: 0;
}

#p5{
  background-color: rgba(0, 245, 215, 0.3);
  padding-bottom: 3em;
}
#workContainer{
  border-bottom: 1px solid rgba(0,0,0,0.1);
  margin-bottom: -1px;
  padding: 2em 1em 2em 1em ;
}

#lastWork{
  padding-bottom: 3em;
}


.photo{
  width:200px;
  height:200px;
  background-image: url(../images/profile_photo.jpg);
  background-position: center;
  background-size: cover;
  border-radius: 50%;
  margin: 0 auto;
}

.aboutMe{
  max-width: 400px;
  margin:1.5em auto;
}

.hightlight{
  color: green;
}

#p3 div{
  text-align: center;
  margin-top: 0.5em;
}

#p3 li{
  list-style: none;
}

.stackBox{
  margin: 2em 1em;
  max-width: 400px;
}

.stackBox li{
  border: 1px solid rgba(0,0,0,0.4);
  display: inline-block;
  padding: 0.1em 0.3em 0.1em 0.3em;
  margin-bottom:0.2em;
}


.techStack, .sectionName{
  text-transform: uppercase;
  font-size: 0.9em;
  font-weight: 600;
  letter-spacing: 5px;

}

.techIcon {
  font-size: 3em;
}

.techName{
  text-transform: uppercase;
  font-size: 1.3em;
  font-weight: 600;
  display: inline-block;
  padding: 1em;
  letter-spacing: 5px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

.workText{
  max-width: 500px;
}

.workText #work--summary > a{
  display: block;
  padding: 0.5em 0;
}

.work-box{
  width:100%;
  height: 20em;
  overflow: hidden;
  background-size: cover;
  margin: 1.5em auto 1.5em auto;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
  border: 3px solid white;
}

.work1{
  background-image: url("../images/get.png");
}

.work2{
  background-image: url("../images/twitter.png");
}

.work3{
  background-image: url("../images/imgmaker.png");
  filter: brightness(110%);
}

.work4{
  background-image: url("../images/ttt.png");
}

#workContainer a, .contactName a, .workName{
  text-decoration: none;
  color: rgba(0,0,0,0.6);
  padding: 0px 10px 0px 10px;
  font-weight: bold;
  letter-spacing: 0.2em;
  list-style: none;
}

.contactName a:hover{
  color: rgba(0,0,0,0.7);
}
.workName{
  margin: 1em 0 1em 0;
  font-size: 1.3em;
  color: rgba(0,0,0,0.8);
  text-transform: uppercase;
  font-size: 1em;
  font-weight: 600;
  letter-spacing: 5px;
}
#firstWorkTitle{
  margin-bottom: -3em;
}
.open{
  width:1.8em;
  margin-bottom: 3px;
}

/*Footer*/
footer a{
  text-decoration: none;
}
footer{
  width: 100vw;
  position: fixed;
  bottom: 0;
  left:0;
  height: 50px;
  background-color: white;
}

.footerContainer{
  display: flex;
  justify-content: center;
  padding-bottom: 1em;
}

#githubBottom{
  font-size: 34pt;
  color: rgb(189, 190, 192);
}

#github{
  font-size: 34pt;
  color: rgb(128, 128, 128);
}

.icons{
  height: 32px;
  margin-left: 20px;
  margin-bottom: -24px;
}

#resume{
  filter: opacity(0.8);
}

.iconWrapper{
  display: inline-block;
  margin-left: -3px;
}

/*Responsive*/
@media screen and (max-width: 500px) and (orientation: portrait){

  #sign, header, footer{
    display:none;
  }


  .work-box{
    height:15em;
    background-size: cover;
    background-position: center;
  }

  #menu, .signBottom{
    display: inherit;
  }

  .name{
    font-size: 2.9em;
    margin-top: -0.1em;
    margin-bottom: -0.1em;
  }
  .title{
    font-size: 1.4em;
    width:100%;
  }
  #p1, #p2, #p3, #p5{
    padding: 0em 1em 0em 1em;
  }
  #p4{
    padding: 0em 1em 0em 1em;
  }
  .pageWrapper{
    padding: 0 0.5em 0em 0.5em;
  }
  .techName{
    padding:0.5em 0 0 0 ;
  }
  .stackBox{
    margin: 1em 1em;
  }

}

@media screen and (max-height: 500px) and (orientation: landscape){
  #p1{
    padding-top: 2em;
  }
  .name{
    font-size: 2em;
  }
  .title{
    font-size: 1.4em;
    width:100%;
  }
  #sign, header, footer{
    display:none;
  }
  #menu, .signBottom{
    display: inherit;
  }
  .pageWrapper{
    padding: 0 1em;
  }

  #p1, #p2, #p3, #p4, #p5{
    padding-bottom: 4em;
  }

}