html {
  font-size: 1px;
}

body {
  background: #eee;
  font-family: 'Montserrat', sans-serif;
  min-height: 440rem;
}

.mainBody {
  background: #444;
  text-align: center;
  box-sizing: content-box;
  border: #444 15rem solid;
  z-index: -1;
  width: 413rem;
  height: 413rem;
  border-radius: 50%;
  box-shadow: 0 0 15rem rgba(0, 0, 0, .5);
}

.button {
  z-index: -1;
  width: 200rem;
  height: 200rem;
  display: inline-block;

  cursor: pointer;
  -webkit-transition: opacity 300ms linear;
  -moz-transition: opacity 300ms linear;
  -o-transition: opacity 300ms linear;
  -ms-transition: opacity 300ms linear;
  transition: opacity 300ms linear;
}

.offButton{
  opacity: .5;
}

.button1 {
  border-top-left-radius: 100%;
  background: #34A853;
  margin: 0 6rem 1rem 0;
}

.button2 {
  border-top-right-radius: 100%;
  background: #EA4335;
  margin: 0 0 1rem 6rem;
}

.button3 {
  border-bottom-left-radius: 100%;
  background: #E0E03E;
  margin-top: 6rem;
  margin-right: 6rem;
}

.button4 {
  border-bottom-right-radius: 100%;
  background: #4285F4;
  margin-top: 6rem;
  margin-left: 6rem;
}

.control {
  width: 220rem;
  height: 220rem;
  background: #ededed;
  border-radius: 100%;
  z-index: 9999;
  border: solid #444 12rem;
}

.center {
  z-index: 99999;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

h5 {
  line-height: 2;
  font-size: 15rem;
  text-transform: uppercase;
  font-weight: 700;
  max-height: 30rem;
  padding-top: 30rem;
  border: 0rem solid #eee;
  margin: auto;
  margin: 40rem auto 25rem;
  color: #eee;
  -webkit-transition: padding 500ms linear;
  -moz-transition: padding 500ms linear;
  -o-transition: padding 500ms linear;
  -ms-transition: padding 500ms linear;
  transition: padding 500ms linear;
}

.roll{
  padding-top: 29rem;
}

.display {
  margin: auto;
  width: 120rem;
  background: #444;
  border-radius: 5rem;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
}

h4,
h5 {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}

.score {
  display: inline-block;
  border-radius: 100%;
  text-align: center;
}

.cbtn {
  display: inline-block;
  border-radius: 100%;
  width: 40rem;
  height: 40rem;
  color: #eee;
  font-weight: 700;
  font-size: 9rem;
  text-transform: uppercase;
  box-shadow: 0rem 1rem 2rem 2rem rgba(0, 0, 0, .3);
  border: 0rem solid #fff;
  cursor: pointer;
  -webkit-transition: box-shadow 100ms ease-in;
  -moz-transition: box-shadow 100ms ease-in;
  -o-transition: box-shadow 100ms ease-in;
  -ms-transition: box-shadow 100ms ease-in;
  transition: box-shadow 100ms ease-in;
}

.cbtn:active {
  box-shadow: none;
}

.onOff {
  background: #444;
}

.start {
  background: #E02626;
  margin: auto 8rem;
}

.strict {
  background: #D2D234;
}

h4 {
  line-height: 40rem;
}

.unclickable:active{
  box-shadow: 0rem 0rem 6rem rgba(0, 0, 0, .7);
}

.glow{
  opacity: 1;
}

@media screen and (max-width: 500px) {
  html {
    font-size: .7px;
  }
}