body{
    background-color:#f1f1ee;
      font-family: 'Nunito', sans-serif;
}

.dial{
    width:70%;
    margin: auto;
    z-index: 0;
}

.below{
  font-size: 14px;
}

a:link {
  color: black;
  text-decoration: none;
}
a:hover {
  color: pink;
  text-decoration: none;
}




#button1:hover {
    opacity: 100%;
    stroke-dasharray: 300,0,3000;
  }


#button2:hover {
   opacity: 100%;
}

#button3:hover {
  opacity: 100%;
}

#button4:hover {
    opacity: 100%;
}

#button5:hover {
  opacity: 100%;
}


#button6:hover {
    opacity: 100%;
}


#button7:hover {
  opacity: 100%;
}

#button8:hover {
  opacity: 100%;
}

#button9:hover {
  opacity: 100%;
}

#button10:hover {
    opacity: 100%;
}

#button11:hover {
  opacity: 100%;
}


#button12:hover {
  opacity: 100%;
}

#button13:hover {
    opacity: 100%;
}

#button14:hover {
    opacity: 100%;
}

#button15:hover {
  opacity: 100%;
}


#button16:hover {
  opacity: 100%;
}


#button17:hover {
opacity: 100%;
}

#button18:hover {
  opacity: 100%;
}

#button19:hover {
    opacity: 100%;
}

#button20:hover {
  opacity: 100%;
}

#button21:hover {
  opacity: 100%;
}