html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  overflow: hidden;
  cursor: default !important;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: none !important;
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -ms-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  transition: all 0.1s ease;
}

div {
  white-space: nowrap;
}

body {
  background: #EBEBBC;
  font-family: 'Righteous', Arial;
  font-size: 2em;
  text-align: center;
}

h1 {
  font-size: 2.5em;
  margin: 22px 0px 0px 12px;
}

.smallTxt {
  font-size: .6em;
  vertical-align: 10px;
}

.label {
  position: absolute;
  top: 52%;
  left: 42%;
  font-family: 'Righteous', Arial;
  font-size: .95em;
  color: #333;
}

.game {
  position: relative;
  height: 500px;
  width: 500px;
  border-radius: 100%;
  background: #EBEBBC;
  margin: 50px auto;
  box-shadow: 0 0 15px #555;
}

.count {
  position: absolute;
  left: 5%;
  top: 39%;
  width: 80px;
  height: 50px;
  background-color: #2B0000;
  border-radius: 10%;
  border: 2px inset #200;
  color: #C00;
  font-family: 'Press Start 2P', monospace;
  font-size: 1.75em;
  line-height: 1.6em;
}

.ctrlBtn {
  position: absolute;
  height: 30px;
  width: 30px;
  border: 3px solid #333;
  border-radius: 100%;
  box-shadow: inset 0 0 5px #555;
}

.ctrlBtn:hover {
  cursor: pointer !important;
}

#startBtn {
  background-color: red;
  left: 44%;
  top: 40%;
}

#startBtn:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
  background: firebrick;
}

#strictBtn {
  background-color: yellow;
  left: 74%;
  top: 40%;
}

#strictBtn:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
  background: #DBC800;
}

.strictLight {
  position: absolute;
  left: 90%;
  top: 44%;
  height: 12px;
  width: 12px;
  background: black;
  border: 1px solid #333;
  border-radius: 100%;
  box-shadow: outset 0 0 5px #555;
}

.controls {
  position: absolute;
  height: 275px;
  width: 275px;
  background: #EBEBBC;
  border: 18px solid black;
  border-radius: 100%;
  top: 22.5%;
  left: 22.5%;
  z-index: 10;
}

.powerSwitchSlot {
  position: absolute;
  left: 40%;
  bottom: 15%;
  width: 50px;
  height: 25px;
  background-color: #111;
  background-image: url('https://i.imgsafe.org/5871b3e056.jpg');
  background-size: cover;  
  border-radius: 10%;
  color: #E00;
  padding-left: 2px;
  font-family: 'Press Start 2P', monospace;
  font-size: 1.8em;
  line-height: 1.6em;
}

.powerSwitch {
  position: absolute;
  top: 10%;
  left: 5%;
  width: 20px;
  height: 20px;
  background-color: #AAA;
  background-image: url('https://i.imgsafe.org/58775649ad.jpg');
  background-size: cover;
  border-radius: 10%;
}

.powerSwitch:hover {
  cursor: pointer !important;
}

.powerLabel {
  position: absolute;
  bottom: 6%;
  left: 45%;
  font-size: 0.8em;
}

.colorBtn {
  position: absolute;
  height: 250px;
  width: 250px;
  border: 12px solid black;
  
}

.colorBtn:hover {
  cursor: pointer !important;
}

.colorBtn:active {
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.6);
}

.greenBtn {
  border-top-left-radius: 100%;
  background: #32CC52;
  background: linear-gradient(to top left, #32CC52, #060);
}

.greenBtn:active {
  background: linear-gradient(to top left, #32CC52, #040);
}

.greenBtn.litUp {
  background: #00F;
  background: linear-gradient(to bottom left, #32CC52, #0F0);
}

.redBtn {
  border-top-right-radius: 100%;
  right: 0px;
  background: #E33400;
  background: linear-gradient(to top right, #E33400, #600);
}

.redBtn:active {
  background: linear-gradient(to top right, #E33400, #400);
}

.redBtn.litUp {
  background: #00F;
  background: linear-gradient(to bottom left, #E33400, #F00);
}

.blueBtn {
  border-bottom-right-radius: 100%;
  right: 0px;
  bottom: 0px;
  background: #3083DF;
  background: linear-gradient(to bottom right, #3283DF, #006);
}

.blueBtn:active {
  background: linear-gradient(to bottom right, #3083DF, #004);
}

.blueBtn.litUp {
  background: #00F;
  background: linear-gradient(to bottom left, #2222DD, #00E);
}

.yellowBtn {
  border-bottom-left-radius: 100%;
  bottom: 0px;
  background: #EAD82E;
  background: linear-gradient(to bottom left, #EAD82E, #660);
}

.yellowBtn:active {
  background: linear-gradient(to bottom left, #EAD82E, #440);
}

.yellowBtn.litUp {
  background: #FF0;
  background: linear-gradient(to bottom left, #EAD82E, #FF0);
}

@media only screen and (max-device-width: 720px) {
  game {
    width: 100%;
  }
}