body {
  width: 100%;
  font-family: 'Roboto', sans-serif;
  text-algin: center;
  overflow-y: scroll; 
  overflow-x: hidden;
    background-color: #151433;

}

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.stitch {
  max-width: 946px;
  height: 100%;
  left: 0px;
  margin: 0 auto;
  padding-left: 0;

}

/* orbital layout base styles */
.orbiting {
  pointer-events: none;
  -webkit-animation: orbit 80s linear infinite;
  -moz-animation: orbit 80s linear infinite;
  -o-animation: orbit 80s linear infinite;
  animation: orbit 80s linear infinite;
}

.stabilize {
  pointer-events: all;
  -webkit-animation: reverseOrbit 80s linear infinite;
  -moz-animation: reverseOrbit 80s linear infinite;
  -o-animation: reverseOrbit 80s linear infinite;
  animation: reverseOrbit 80s linear infinite;
}

.stabilizeX2 {
    pointer-events: all;

  -webkit-animation: reverseOrbit 40s linear infinite;
  -moz-animation: reverseOrbit 40s linear infinite;
  -o-animation: reverseOrbit 40s linear infinite;
  animation: reverseOrbit 40s linear infinite;
}

.galaxy {
  position: absolute;
  padding-left: 0;
  margin-left: 0;

  max-width: 946px;

  width: 100%;
  top: 50%;
}

.galaxy li {
  position: absolute;
  left: 50%;


  list-style: none;

}

/* face circle styles (sol) */
.sol {
  width: 30%;
  height: 0%;
  padding-bottom: 30%;
  
  margin-left: -15%;
  margin-top: -15%;
  -moz-border-radius: 50%; 
  -webkit-border-radius: 50%; 
  border-radius: 50%;

  border: 1px solid black;
  /*
  margin-left: auto;
  margin-right: auto;
  */
  overflow: hidden;
}

.myface {
  position: relative;

  width: 100%;
  height: auto;

  margin-left: auto;
  margin-right: auto;
}

.facebelt {
  position: relative;

  width: 100%; 
  height: 0;
  padding-top: 23%;
  margin-top: -23%;
  background: #FFFFFF;

  margin-left: auto;
  margin-right: auto;

}

/* share orbital styles */
.share {
  margin-left: -25%;
  margin-top:-25%;
  width: 50%;
  padding-bottom: 50%;
  height: auto;
}

.shareSphere {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 14%;
  height: 0;
  padding-bottom: 14%;

  margin-right: -7%;
  margin-top: -7%;
  
  /*TODO (1): Use JS to bind minimum padding on change or something*/

  background-color: #e7e7e7;

  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

.shareSVG {
  width: 60%;
  height: auto;
  margin-left: -5%;
}

.shareContent {
  float: left;
  height: 50%;
  width: 100%;
  
  margin-top: 20%;

  text-align: center;
  font-size: .5em;
}

.linked {
  position: absolute;
  top: 0px;
  right: 0px;

  margin-top: -15%;
  margin-right: -15%;

  width: 30%;
  height: 30%;
}

.linkedSphere {
  position: absolute;
  width: 30%;
  height: 0;

  top: 0;
  right: 0;

  padding-bottom: 30%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: #006699;
  text-align: center;
}

.linkedSphere:hover {
  opacity: .6;
}

/*
.linkedSphere:hover:after {
  position: relative;
  content: "LinkedIn";
  font-size: .6em;
}
*/

.linkedContent {
  height: 60%;
  width: 100%; 
  margin-top: 19%;
  text-align: center;
  font-size: .5em; 
}
.linkedSVG {
  width: 60%;

  height: auto;
  left: 20%;

}

.github {
   position: absolute;
  top: 0px;
  right: 0px;

  margin-top: -22.5%;
  margin-right: -22.5%;

  width: 45%;
  height: 45%;
}

.githubSphere {
  position: absolute;
  width: 20%;
  height: 0;

  top: 0;
  left: 30;

  padding-bottom: 20%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: #4183c4;
  text-align: center;
}

.githubSphere:hover {
  opacity: .6;
}

.githubContent {
  height: 60%;
  width: 100%;
  margin-top: -3%;
  margin-left: -3%; 
  text-align: center;
  font-size: .5em; 
}
.githubSVG {
  width: 108%;

  height: auto;
  left: 20%;

}

.stackexchange {
   position: absolute;
  top: 0px;
  right: 0px;

  margin-top: -18%;
  margin-right: -18%;

  width: 36%;
  height: 36%;
}

.stackexchangeSphere {
  position: absolute;
  width: 25%;
  height: 0;

  left: 0;
  bottom: 0;

  padding-bottom: 25%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: #FF9900;
  text-align: center;
}

.stackexchangeSphere:hover {
  opacity: .6;
}

.stackexchangeContent {
  height: 60%;
  width: 100%;
  margin-top: 15%;
  margin-left: 0%; 
  text-align: center;
  font-size: .5em; 
}
.stackexchangeSVG {
  width: 80%;

  height: auto;
  left: 20%;

}

.twitter {
   position: absolute;
  top: 0px;
  right: 0px;

  margin-top: -16%;
  margin-right: -16%;

  width: 32%;
  height: 32%;
}

.twitterSphere {
  z-index: 1000;
  position: absolute;
  width: 27%;
  height: 0;

  right: 0;
  bottom: 0;

  padding-bottom: 27%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: #FFFFFF;
  text-align: center;
}

.twitterSphere:hover {
  opacity: .6;
}

.twitterContent {
  height: 60%;
  width: 100%;
  margin-top: 22%;
  margin-left: 2%; 
  text-align: center;
  font-size: .5em; 
}
.twitterSVG {
  width: 80%;

  height: auto;
  left: 20%;

}

.email {
  position: absolute;
  top: 0px;
  right: 0px;

  margin-top: -19%;
  margin-right: -19%;

  width: 38%;
  height: 38%;
}

.emailSphere {
  position: absolute;
  width: 25%;
  height: 0;

  left: 0%;
  top: 30%;

  padding-bottom: 25%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: #FFFFFF;
  text-align: center;
}

.emailSphere:hover {
  opacity: .6;
}

.emailContent {
  height: 60%;
  width: 100%;
  margin-top: 25%;
  margin-left: 0%; 
  text-align: center;
  font-size: .5em; 
}
.emailSVG {
  width: 75%;

  height: auto;
  left: 10%;

}
/* resume orbital styles */
.resume {
  margin-left: -30%;
  margin-top:-30%;
  width: 60%;
  padding-bottom: 60%;
  height: auto;

}

.resumeSphere {
  position: absolute;
  bottom: 50%;
  left: 0px;
  width: 14%;
  height: 0;
  padding-bottom: 14%;

  margin-right: -7%;
  margin-top: -7%;
  
  /*TODO (1): Use JS to bind minimum padding on change or something*/

  background-color: #e7e7e7;

  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

.resumeSphere:hover {
  opacity: .6;
}
.resumeSVG {
  width: 80%;
  height: auto;
  margin-left: -5%;
}

.resumeContent {
  float: left;
  height: 50%;
  width: 100%;
  
  margin-top: 10%;

  text-align: center;
  font-size: .5em;
}

/* projects orbital styles */
.projects {
  margin-left: -32.5%;
  margin-top:-32.5%;
  width: 65%;
  padding-bottom: 65%;
  height: auto;

}

.projectsSphere {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 14%;
  height: 0;
  padding-bottom: 14%;

  margin-right: -7%;
  margin-top: -7%;
  
  /*TODO (1): Use JS to bind minimum padding on change or something*/

  background-color: #e7e7e7;

  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

.projectsSphere:hover {
  opacity: .6;
}

.projectsSVG {
  width: 80%;
  height: auto;
  margin-left: 10%;
  margin-top: 10%;
}

.projectsContent {
  float: left;
  height: 50%;
  width: 100%;
  
  margin-top: 10%;

  text-align: center;
  font-size: .5em;
}

/* blog orbital styles */
.blog {
  margin-left: -35%;
  margin-top:-35%;
  width: 70%;
  padding-bottom: 70%;
  height: auto;

}

.blogSphere {
  position: absolute;
  bottom: 20%;
  right: 0;
  width: 14%;
  height: 0;
  padding-bottom: 14%;

  margin-right: -7%;
  margin-top: -7%;
  
  /*TODO (1): Use JS to bind minimum padding on change or something*/

  background-color: #e7e7e7;

  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

.blogSphere:hover {
  opacity: .6;
}

.blogSVG {
  width: 80%;
  height: auto;
  margin-left: 11%;
  margin-top: 10%;
}

.blogContent {
  float: left;
  height: 50%;
  width: 100%;
  
  margin-top: 10%;

  text-align: center;
  font-size: .5em;
}
@keyframes orbit {
    from{
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);

    }
    to{
        -webkit-transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
  }


  @keyframes reverseOrbit {
    from {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
  }