* {
  box-sizing:border-box;
}

html {
  font-family:'Oswald', sans-serif;
  min-height:100%;
  background:linear-gradient(to bottom, #777, #444);
  background-repeat:no-repeat;
  background-position:fixed;
  background-size:cover;
  line-height:1.4;
  color:#222;
  overflow-x:hidden;
  @media all and (max-width:600px){
    font-size:14px;
  }
}

body {
  height:100%;
  min-height:100%;
}

form {
  max-width:30em;
  margin:4rem auto;
  text-align:center;
}

fieldset {
  position:relative;
  border:none;
  width:16rem;
  height:16rem;
  margin:0 auto;
  legend {
    position:absolute;
    top:-4rem;
    left:0;
    width:100%;
  }
  label {
    position:absolute;
    display:block;
    margin:0 auto;
    padding-top:1rem;
    width:1rem;
    left:7.5rem;
    transform-origin:50% 7.5rem;
  }
  input {
    position:absolute;
    width:2rem;
    left:7rem;
    display:block;
    margin:1rem auto 0 auto;
    padding:0;
    transform-origin:50% 7.5rem;
    opacity:0;
    &:hover {
      cursor:pointer;
    }
  }
  #radio-choice-1, label[for="radio-choice-1"] {
    transform:rotateZ(-48deg);
  }
  #radio-choice-2, label[for="radio-choice-2"] {
    transform:rotateZ(-24deg);
  }
  #radio-choice-3, label[for="radio-choice-3"] {
    transform:rotateZ(0deg);
  }
  #radio-choice-4, label[for="radio-choice-4"] {
    transform:rotateZ(24deg);
  }  
  #radio-choice-5, label[for="radio-choice-5"] {
    transform:rotateZ(48deg);
  }
  input[type="radio"]:checked {
    & + label {
      color:#2f5;
      text-shadow: 0px 0px 4px #2f5;
    }  
  }
  
}

input[type="radio"]{
  &:checked#radio-choice-1 ~ .dial {
    transform:rotateZ(-48deg);
    &::before {
      transform:rotateZ(48deg);
    }
    &::after {
      transform:rotateZ(48deg);
    }
  }
  &:checked#radio-choice-2 ~ .dial {
    transform:rotateZ(-24deg);
    &::before {
      transform:rotateZ(24deg);
    }
    &::after {
      transform:rotateZ(24deg);
    }
  }
  &:checked#radio-choice-3 ~ .dial {
    transform:rotateZ(0deg);
    &::before {
      transform:rotateZ(0);
    }
    &::after {
      transform:rotateZ(0);
    }
  }
  &:checked#radio-choice-4 ~ .dial {
    transform:rotateZ(24deg); 
    &::before {
      transform:rotateZ(-24deg);
    }
    &::after {
      transform:rotateZ(-24deg);
    }
  }
  &:checked#radio-choice-5 ~ .dial {
    transform:rotateZ(48deg);
    &::before {
      transform:rotateZ(-48deg);
    }
    &::after {
      transform:rotateZ(-48deg);
    }
  }    
}

.dial {
  position:relative;
  text-align:center;
  line-height:0;
  font-size:65%;
  color:#082;
  text-shadow: 0px 0px 7px #2f5;
  display:block;
  width:8rem;
  height:8rem;
  padding:1rem;
  background:radial-gradient(#272727 30%,#333 50%,#222 65%,#111 90%, black 98%);
  margin:3rem auto;
  border-radius:50%;
  box-shadow:0 5px 10px rgba(0,0,0,0.6);
  transition:transform 0.3s ease-in-out;
  &::before {
    position:absolute;
    content:'';
    display:block;
    width:6rem;
    height:6rem;
    border-radius:50%;
    background:radial-gradient(circle at 50% 80%,
        rgba(15,15,15,0.4) 40%,
        rgba(15,15,15,0.1) 70%);
    box-shadow:0 5px 10px rgba(0,0,0,0.45);
    transition:transform 0.3s ease-in-out;
  }
  &::after {
    position:absolute;
    content:'';
    display:block;
    width:8rem;
    height:8rem;
    border-radius:50%;
    top:0;
    left:0;
    background:radial-gradient(circle at 50% 25%, rgba(255,255,255,0.15), rgba(255,255,255,0));
    transition:transform 0.3s ease-in-out;
  }
}

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */