body{
  font-family: "Raleway", sans-serif;
  margin-top: -35px;
}
#header-wrap{
  padding-top: 5%;
  vertical-align: center;
  color: white;
  width: 60%;
  height: 90%;
  position: fixed;
  
}
ul#cyclelist {
  width:200px;
  border:solid;
  position:relative;
  overflow:hidden;
  height:200px;
}
ul#cyclelist li {
  font-size:1.4em;
  padding:20px;
  opacity:0;
  position:absolute;
}
#test{
  padding-top: 25vh;
  text-align: center;
  font-size: 99px;
 
  float: bottom;

}
#name{
  color: black;
  text-align: center;
}
#sub{

  text-align: center;
  font-size: 40px;
 
}

#test2{
 
  color: black;
  opacity: 1;
}
#nav{
 height: 0%;
}
#drag{
  height: 50px; 
  width: 60px;
  position: fixed;
}
.circular {
    width: 200px;
    height: 200px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    background: url(/static/images/me.jpg);
    display: inline-block;
    float: right;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     z-index: -2;
}
   
}

li{
  text-align: center;
}
canvas{
  margin-top: -50px;
}
#linked{
  height: 20px;
  width: 20px;
  margin-left: 20px;
  margin-bottom: -5px;
   box-shadow: 3px 2px 3px #888888;
}
#three{
  padding-top: 4%;
  height: 70vh;
  z-index: 40;
}


.git{
  height: 20px;
  width: 20px;
  margin-left: 30px;
  margin-bottom: -5px;
   box-shadow: 3px 2px 3px #888888;

}
.opacity{
  opacity: 0;
  z-index: -999;
  

}
.hidden{
  visibility: hidden;
}
#demo{
  color: black;
  width: 200px;
  height: 100px;
}

#two{
  padding-top: 3%;
  height: 140vh;
}
@media only screen and (max-width: 1400px) {
    #two {
        height: 190vh;
    }
}
#one{
  padding-top: 5%;
  height: 103.45vh;
}

}
img{
  display: inline-block;
}

#background{
  height: 105vh;
  background-image: url(https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80);
 
  float: top;


    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
 /* padding-top: 20vh;*/
  /*background-size: cover;*/
}

.card{
  margin-top: 1%;
  margin-left: 2%;
}
#backgroundpic{

  z-index: -1;
  position: absolute;
  width: 100%;
  height: 105vh;
}
.customnavbar{
  vertical-align: center;
  background-color: white;
  width: 100%;
  height: 12vh;
  z-index: 9;
  line-height: 9vh;
  position: fixed;
  opacity: 1;
  color: black;
  box-shadow: 0 2px 2px -2px rgba(0,0,0,.2);
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  transition: color 1s ease-in-out;
  transition: background-color 1s ease-in-out;
  
}

.customnavbartop{

  background-color: transparent;
  width: 100%;
  height: 12vh;
  z-index: 9;
  line-height: 9vh;
  position: fixed;
  opacity: 1;
  color: white;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  transition: background-color 1s ease-in-out;

}
@media only screen and (min-width: 1600px) {
  .customnavbartop{
    line-height: 8vh;
  }
  .customnavbar{
    line-height: 8vh;
  }
    td > p{
      font-size: 1.5em;
    }
}
td{
  float: right;
  padding-top: 1%;
  padding-left: 2%;
  padding-right: 2%;
  height: 100%;


}
table{
  font-weight: bolder;
   height: 100%;
}

#navleft{
  float: left;
}
.menubutton{
  vertical-align: center;
  cursor:pointer;

}
.menubutton:hover{
  color: #FFD700;  
}
#sit{
  margin-top: 8%;
}


#project-container{
  text-indent: 25px;
  height: 10%;
  width: 100%;
}