body {
  background: #282828;
  margin: 0 auto;
  font-family: 'Hind', cursive;
}
#whyAreYouLookingAtMyCode {
  text-align: center;
}
#wrapper {
	position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 500px;
    height: 450px;
}
#wrapper #circle {
  width: 260px;
  height: 260px;
  border-radius: 300px;
  background: #1f1f1f;
  margin: auto;
  -moz-transition: 1s;
  -o-transition: 1s;
  -webkit-transition: 1s;
  transition: 1s;
}
#wrapper #circle:hover {
  background: #00adef;
}
#wrapper #text {
  margin: 15px 0 0;
  padding: 0;
  font-size: 70px;
  text-shadow: 3px 3px #111;
  color: #00adef;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 75px;
  cursor: default;
}
#wrapper #text span {
  text-shadow: 2px 2px #111;
  color: #6c6c6c;
  line-height: 17px;
  font-size: 20px;
  font-weight: 500;
  display: block;
}
#wrapper #text span img {
  vertical-align: middle;
}
#wrapper #text span strong {
  color: #868686;
}
#wrapper #photoCircle,
#wrapper #photoCircle + canvas {
  margin: 20px;
}
#wrapper #social {
  margin: 15px 0 0 auto;
}
#wrapper #social .icon {
  display: inline-block;
  margin: 0 5px;
}
#wrapper #social .icon a {
  height: 32px;
  width: 32px;
  border-radius: 3px;
  display: inline-block;
  text-indent: -9999px;
  opacity: .35;
  -moz-transition: .5s;
  -o-transition: .5s;
  -webkit-transition: .5s;
  transition: .5s;
  cursor: pointer;
}
#wrapper #social .icon a:hover {
  opacity: 1;
}
#wrapper #social .icon a.in {
  background: url(images/2-linkedin-grayscale.png);
}
#wrapper #social .icon a.mm {
  background: url(images/2-medium-grayscale.png);
}
#wrapper #social .icon a.gh {
  background: url(images/2-github-grayscale.png);
}
#wrapper #social .icon a.tw {
  background: url(images/2-twitter-grayscale.png);
}
#wrapper #social .icon a.ig {
  background: url(images/2-instagram-grayscale.png);
}
#wrapper #social .icon a.strava {
  background: url(images/2-strava-grayscale.png);
}
#photoCircle.spin {
  animation: spinSpring 6s cubic-bezier(0.68,-0.55,0.27,1.55);
}

@keyframes spinSpring {
  0% { transform: rotate(0deg) scale(1.05); }
  10% { transform: rotate(60deg) scale(0.98); }
  20% { transform: rotate(120deg) scale(1.05); }
  30% { transform: rotate(180deg) scale(0.98); }
  40% { transform: rotate(240deg) scale(1); }
  50% { transform: rotate(300deg) scale(1.05); }
  60% { transform: rotate(360deg) scale(0.98); }
  68% { transform: rotate(420deg) scale(1.03); }
  75% { transform: rotate(480deg) scale(0.97); }
  83% { transform: rotate(540deg) scale(1.01); }
  90% { transform: rotate(600deg) scale(1.05); }
  95% { transform: rotate(660deg) scale(1.03); }
  100% { transform: rotate(720deg) scale(1); }
}
.noSelect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}