body {

  background: radial-gradient(#E74C3C,#CF000F);

  font-family: "helvetica neue";

}

​

.wrapper {

  width:200px;

  height:200px;

  /*border:1px solid red;*/

  margin: 0 auto;

  margin-top: 10%;

  position: relative;

}

​

.compass {

  width:200px;

  height:200px;

  border-radius: 50%;

  position: absolute;

  background: radial-gradient(#00C1AB,#0A6FD9);

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  border:4px solid #EEEEEE;

  border-style: dotted;

  box-shadow: 0 0 0 5px #4C77BE, 0 0 0 10px #EEEEEE;

}

​

​

.needleHolder {

  width:200px;

  height:200px;

  position: absolute;

  top: 0;

  left: 0;

  transition:all 2s;

  -webkit-transform:rotate(45deg);

}

​

.needleHolder:hover {

  -webkit-transform:rotate(360deg);

​

}

​

.north {

  width: 0;

  height: 0;

  border-left: 18px solid transparent;

  border-right: 18px solid transparent;

  border-bottom: 100px solid #D91E18;

  position: absolute;

  left:50%;

  top:0;

  transform: translateX(-50%);

}

​

.north::before {

  content: "";

  position: absolute;

  width: 0;

  height: 0;

  border-bottom: 100px solid #962A1B;

  border-right: 18px solid transparent;

}

​

.north::after {

  content: "";

  position: absolute;

  width: 0;

  height: 0;

  border-bottom: 100px solid #CF000F;

  border-right: 6px solid transparent;

}

​

.south {

  width: 0;

  height: 0;

  border-left: 18px solid transparent;

  border-right: 18px solid transparent;

  border-top: 100px solid #EEEEEE;

  position: absolute;

  left:50%;

  top:50%;

  transform: translateX(-50%);

}

​

.south::before {

  content: "";

  position: absolute;

  width: 0;

  height: 0;

  top:-100px;

  border-top: 100px solid #95A5A6;

  border-right: 18px solid transparent;

}

​

.south::after {

  content: "";

  position: absolute;

  width: 0;

  height: 0;

  top:-100px;

  border-top: 100px solid #DADFE1;

  border-right: 6px solid transparent;

}

​

h2 {

  text-align: center;

  color:#EEEEEE;

  margin-top: 5%;

}