body {
   font-family: "Muli","sans-serif";
   font-size: 12px;
   letter-spacing: 1px;
   position: absolute;
   margin: 0 auto;
   width: 100%;
   height: 100%;
   overflow: hidden;
   color: #434763;
   background-color: #eff1f0;
  

}
#socialmediabar {
   position: absolute;
   top: 7.5%;
   left: 85%;
   opacity: 0.3;
}

a {
    text-decoration: none;
   color: black;
}

#name {
   font-family: "Arapey","sans-serif";
   position: absolute;
   left: 50%;
   top: 5%;
   margin: 0 auto;
   z-index: 3;
   font-size: 36px;
   transform: translateX(-50%);
 
}

#navline {
   width: 80%;
   top: 12.5%;
   left: 10%;
   height: 3px;
   z-index: 2;
   margin: 0 auto;
   position: absolute;
   background-color: #cccccc;

}


#sky {
   width: 100%;
   top: 20%;
   position: absolute;
   z-index: 1;
}

#bike2 {
   z-index: 30;
   width: 25%;
   position: absolute;
   left: 50%;
   transform: translate(-50%, -50%);
   top: 50%;

}


#musicbox {
   position: absolute;
   z-index: 4;
}

#crane {
   position: absolute;

}

#aboutbutton {
  position: absolute;
   list-style: none;
   top: 12.5%;
   padding: 10px;
   z-index:2;
   left: 50%;
   transform: translateX(-175px);
}

#resumebutton {
   position: absolute;
   list-style: none;
   top: 12.5%;
   padding: 10px;
   z-index: 2;
   left: 50%;
   transform: translateX(-50%);
}


#hobbies {
   position: absolute;
   list-style: none;
   top: 12.5%;
   padding: 10px;
   z-index:2;
   left:50%;
   transform: translateX(100px);
   
}


#hobbiesactive {
   display:none;
   position: absolute;
   list-style: none;
   top: 3%;
   z-index:2;
   left:57.5%;
   transform: translateX(-50%);
}

#menu {
   position: absolute;
   font-size: 1.5em;
   left: 50%;
   top:2.5%;
   transform: translateX(-50%);
   z-index: 15;
   width: 30px;
}


/*Animation*/
.move {
  animation: move1 4s steps(100) infinite alternate;
   transition-timing-function:  cubic-bezier(0.42, 0.0, 0.58, 1.0);
}



@keyframes move1 {
  from { top: 45%; left: 50%; }
  to   { top: 55%; left: 50%; }
  
}


.hobbiesactive {
}

.wingsactive {
}

.textactive {
}

.rowactive {
}

#projectscontainer {
   font-family: 'Arapey', 'sans-serif';
   height: 50%;
   width: 60%;
   z-index: 200;
   position: absolute;
   top: 22.5%;
   left: 50%;
   transform: translateX(-50%);

   display:none;
   overflow: scroll;
}

.row {
   width:100%;
   height: 100px;
   background-color: transparent;

   z-index: 210;
 
}

.describerow {
   display:none;
   font-family: 'Montserrat', 'sans-serif';
   width: 100%;
   opacity:0.15;
   z-index: 240;
   position: absolute;
}



.square {
   height: 100px;
   width: 100px;
   margin: 2px;
   background-color: transparent;
   display: inline-block;
   z-index: 10;
}

#sq1 {
   background-image: url("imgs/led.gif");
   background-size: cover;
   opacity: 0.5;
}

#sq6 {
   background-image: url("imgs/neopixel2.gif");
   background-size: cover;
   opacity: 0.6;
}

#sq3 {
   background-image: url("imgs/musicbox.gif");
   background-size: cover;
   opacity: 0.65;
}

#sq9 {
   background-image: url("imgs/3dprint.gif");
   background-size: cover;
   opacity:0.8;
}

#sq7 {
   background-size: cover;
   background-image: url("imgs/3dprint2.png");
   opacity: 0.5;
}

#sq10 {
   background-size: cover;
   opacity: 0.7;
}

#sq11 {
   background-image: url("imgs/cat.png");
   background-size: cover;
   opacity: 0.6;
}

#sq13 {
   background-image: url("imgs/yingyang.png");
   background-size: cover;
   opacity: 0.6;
}

#sq15 {
   background-image:url("imgs/sing.png");
   background-size: cover;
   opacity: 0.6;
}

#sq17 {
   background-image: url("imgs/reddit.png");
   opacity: 0.6;
   background-size: cover;
}
/*
#fibcontainer {
   font-family: 'Arapey', 'sans-serif';
   height: 45%;
   width: 45%;
   z-index: 200;
   position: absolute;
   top: 20%;
   left: 50%;
   transform: translateX(-50%);
   display:none;
}

.onhovertext {
   
}

#fibtext {
   display:none;
   left: 50%;
   top:10%;
   transform: translateX(-50%);
}


#twentyone {
   width: 66%;
   height: 100%;
   float:right;
   background-size: cover;
   background-image: url("imgs/neopixel.gif");
   background-position: center;
   opacity: 0.4;
}



#nottwentyone {
   width: 34%;
   height: 100%;
   float: left;
}

#thirteen {
   width: 100%;
   height: 62%;
   background-color: rgba(0,0,0,0.22);

}

#thirteen:hover {
   background-image:url("imgs/musicbox.gif");
   background-size: cover;
}

#not13 {
   height:38%;
   width: 100%;
}

#eight {
   width: 62%;
   float:left;
   height: 100%;
   background-image: url("imgs/led.gif");
   opacity: 0.;
   background-size: cover;
}


#not8 {
   width: 38%;
   float: right;
   height: 100%;
}
#not5 {
   height: 37%;
   width: 100%;
}

#five {
   height: 63%;
   width: 100%;
   background-color: rgba(255,255,255,0.2);
}

#five:hover {
   background-image: url("gerasheart.png");
   width: 100%;
   overflow: hidden;

}
#three {
   float: right;
   background-color: rgba(0,0,0,0.0.01);
   height: 100%;
   width: 60%;
}

#not3 {
   float: left;
   height: 100%;
   width: 40%;
}

#two {
   height: 66%;
   width: 100%;
   background-color: rgba(0,0,0,0.15);
}

#not2 {
   height: 34%;
   width: 100%;
}

#one {
   height: 100%;
   width: 50%;
   float: left;
   background-color: rgba(0,0,0,0.20);
}

#not1 {
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,0.12);
}
*/