.wrapper{
text-align: center;
}

body{

  background-color: purple;
  font-family: 'Gloria Hallelujah', cursive;
}
.controles{

  width:auto;
  margin: auto;


  /*margin: auto;*/

  display: block;

  width: 1000px;


}

.control{
  font-size: 40px;
  /*padding-left: 25px;*/
  display: inline-block;
  margin: auto;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: -50px;
  /*margin-left: 20px;*/


}

.button{
  color: white;
  background-color: black;
  width: 30px;
  height: 30px;
  border: solid 3px black;
  border-radius: 100%;
  font-size: 15px;
  outline: none;
}

.inline{
  /*float: left;*/
  display: inline-block;
}

.controlTitle{
  font-family: 'Gloria Hallelujah', cursive;
  text-align: center;
  font-size: 40px;
  margin: auto;
  margin-top: 80px;
}



.workTimer{
  display: inline-block;
  text-align: center;
  width: 250px;
  height: 250px;
  background-color: yellow;
  border: solid 3px black;
  border-radius: 100%;

}

.clock{
  display: inline-block;

  margin: auto;
  display:inline-block;
  text-align: center;
  width: 250px;;
  height: 250px;;
  background-color: yellow;
  border: solid 3px black;
  border-radius: 100%;
}

.clock :hover{
  cursor:pointer;

}

.breakTimer{
  display: inline-block;
  text-align: center;
  width: 250px;
  height: 250px;
  background-color: yellow;

  border: solid 3px black;
  border-radius: 100%;

}

.clockDisplay{
  text-align: center;
  font-size: 60px;

}




h1{
  margin: auto;
  width: 450px;
  border: solid 3px black;
  border-radius: 100%;
  background-color: yellow;
  font-size: 50px;
  font-family: 'Gloria Hallelujah', cursive;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}