html, body{
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

#canvas{
  width: 100%;
  padding-bottom: 100%;
  position: relative;
}

/****** Cog globals - styles applied to every cog ******/

.cogcontainer{
  position: absolute;
}

.cog{
  width: 100%;
  padding-bottom: 100%;
  border-radius: 50%;
  position: relative;
  background: black;
}

/****** Spokes ******/

.spoke{
  border-radius: 15%;
  position: absolute;
  top: -10%;
  left: 50%; 
  background: grey;
}

/* Even cog only */

.even .spoke{
  height: 120%;
}

/* Odd cog only */

.spokecontainer{
  width: 100%;
  padding-bottom: 100%;
  position: absolute;
}

.odd .spoke{
  height: 60%;
  margin-bottom: 60%;
}

/****** Dressings ******/

.dressing{
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
}

.d0{
  width: 50%;
  padding-bottom: 50%;
  background: black;
  margin-top: -25%;
  margin-left: -25%;
}

.d1{
  width: 40%;
  padding-bottom: 40%;
  background: grey;
  margin-top: -20%;
  margin-left: -20%;
}

.d2{
  width: 24%;
  padding-bottom: 24%;
  background: black;
  margin-top: -12%;
  margin-left: -12%;
}

/****** Keyframes ******/

@keyframes clockwise{
  100% {
    transform: rotate(360deg); 
    -webkit-transform: rotate(360deg); 
    -moz-transform: rotate(360deg); 
    -o-transform: rotate(360deg); 
    -ms-transform: rotate(360deg); 
  }
}

@keyframes anticlockwise{
  100% {
    transform: rotate(-360deg); 
    -webkit-transform: rotate(-360deg); 
    -moz-transform: rotate(-360deg); 
    -o-transform: rotate(-360deg); 
    -ms-transform: rotate(-360deg); 
  }
}

@-webkit-keyframes clockwise{
  100% {
    transform: rotate(360deg); 
    -webkit-transform: rotate(360deg); 
  }
}

@-webkit-keyframes anticlockwise{
  100% {
    transform: rotate(-360deg); 
    -webkit-transform: rotate(-360deg);
  }
}

@-moz-keyframes clockwise{
  100% {
    transform: rotate(360deg); 
    -moz-transform: rotate(360deg); 
  }
}

@-moz-keyframes anticlockwise{
  100% {
    transform: rotate(-360deg); 
    -moz-transform: rotate(-360deg);
  }
}

@-o-keyframes clockwise{
  100% {
    transform: rotate(360deg); 
    -moz-transform: rotate(360deg); 
  }
}

@-o-keyframes anticlockwise{
  100% {
    transform: rotate(-360deg); 
    -moz-transform: rotate(-360deg);
  }
}