CSS quests

body {
  margin: 0;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body {
  background-color: #EBE9E8;
  width: 100%;
  height: 100%;
}

.rotate9 {
  -ms-transform: rotate(9deg);
  -webkit-transform: rotate(9deg);
  transform: rotate(9deg);
}

.rotate18 {
  -ms-transform: rotate(18deg);
  -webkit-transform: rotate(18deg);
  transform: rotate(18deg);
}

.rotate36 {
  -ms-transform: rotate(36deg);
  -webkit-transform: rotate(36deg);
  transform: rotate(36deg);
}

.rotate54 {
  -ms-transform: rotate(54deg);
  -webkit-transform: rotate(54deg);
  transform: rotate(54deg);
}

.rotate72 {
  -ms-transform: rotate(72deg);
  -webkit-transform: rotate(72deg);
  transform: rotate(72deg);
}

main {
  position: relative;
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  display: flex;
}

@keyframes wheel_turn {
  to {
    -ms-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}

.wheel {
  position: relative;
  margin: auto;
  width: 208px;
  height: 208px;
}

.rim {
  position: relative;
  background-color: #5E5E5E;
  width: 208px;
  height: 208px;
  border-radius: 50%;
  animation-name: wheel_turn;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.rim_inner_white {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: white;
  overflow: hidden;
}

.rim_inner_black {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background-color: #5E5E5E;
}

.wheel_teeth {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 4px dashed #5E5E5E;
}

.wheel_teeth_mask {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 176px;
  height: 176px;
  border-radius: 50%;
  border: 4px dashed #EBE9E8;
  -ms-transform: rotate(12deg);
  -webkit-transform: rotate(12deg);
  transform: rotate(12deg);
}

.hole {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 176px;
  height: 176px;
  border-radius: 50%;
  background-color: #EBE9E8;
}

.deco_blues,
.deco_reds {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
}

.deco_blue {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #77AEED;
}

.deco_blue_top {
  top: -7px;
  left: 93px;
}

.deco_blue_right {
  top: 93px;
  right: -7px;
}

.deco_blue_bottom {
  bottom: -7px;
  left: 93px;
}

.deco_blue_left {
  top: 93px;
  left: -7px;
}

.deco_red {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #FF5468;
}

.deco_red_top {
  top: 3px;
  left: 98px;
}

.deco_red_right {
  top: 98px;
  right: 3px;
}

.deco_red_bottom {
  bottom: 3px;
  left: 98px;
}

.deco_red_left {
  top: 98px;
  left: 3px;
}

.mouse {
  position: absolute;
  left: 50%;
  top: 173px;
  margin-left: -15px;
}

.mouse_head {
  position: absolute;
  width: 25px;
  height: 15px;
  border-top-left-radius: 100%;
  border-bottom-left-radius: 25px 2px;
  background-color: #BA8F1A;
  animation-name: mouse_running_head;
  animation-duration: 0.12s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}

.mouse_body {
  position: absolute;
  left: 25px;
  top: 0;
  width: 15px;
  height: 15px;
  background-color: #BA8F1A;
  border-top-right-radius: 100% 50%;
  border-bottom-right-radius: 50%;
  animation-name: mouse_running_body;
  animation-duration: 0.12s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}

.mouse_tail {
  position: absolute;
  right: -28px;
  top: -2px;
  width: 30px;
  height: 9px;
  border-bottom-right-radius: 100%;
  border-width: 3px 0;
  border-style: solid;
  border-color: transparent transparent #BA8F1A transparent;
  background-color: transparent;
  animation-name: mouse_running_tail;
  animation-duration: 0.12s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}

@keyframes mouse_running_head {
  to {
    -ms-transform: rotate(-12deg);
    -webkit-transform: rotate(-12deg);
    transform: rotate(-12deg);
  }
}

@keyframes mouse_running_body {
  to {
    -ms-transform: rotate(18deg);
    -webkit-transform: rotate(18deg);
    transform: rotate(18deg) translateX(-4px) translateY(1px);
  }
}

@keyframes mouse_running_tail {
  to {
    height: 12px;
    -ms-transform: rotate(-48deg) translateY(-12px);
    -webkit-transform: rotate(-48deg) translateY(-12px);
    transform: rotate(-48deg) translateY(-12px);
  }
}