body {
  background-color: #DC9A00;
}

.clock {
  width: 330px;
  height: auto;
  margin-top: 2%;
  margin-left: auto;
  margin-right: auto;
  padding: 3px;
  border: solid 1px #999900;
  border-radius: 50px;
  background-color: #FFBC00;
  box-shadow: 5px 7px 30px 5px rgba(0, 0, 0, 0.68), inset -2px -4px 8px 2px #C99300;
}

h6 {
  color: black;
  padding: 3px;
}

.screen {
  height: 100px;
  width: 320px;
  border-radius: 5px;
  margin-top: 0px;
  margin-right: auto;
  margin-left: auto;
  background-color: #FF8000;
  box-shadow: inset 1px 1px 1.2px 0.01px #CC6600;
}

.settingValue {
  font-size: 20px;
  width: 60px;
  display: inline-block;
  margin-left: -47px;
  margin-right: -46px;
}

#timeLeft {
  position: relative;
  bottom: 25px;
  /*the above two needed to position time properly in screen*/
  font-size: 80px;
  display: inline-block;
}

.dial {
  width: 152px;
  margin: auto;
  display: inline-block;
  position: relative;
}

.dialLabel {
  font-size: 16px;
  color: black;
  margin-bottom: 0px;
}

button {
  background-color: black;
  color: white;
  height: 35px;
  width: 35px;
  box-shadow: 0.7px 1px 5px 0px rgba(0, 0, 0, 0.68), inset -0.01px -0.06px 1.2px 0.01px #89847e;
}

button:active {
  transform: translate(0.7px, 1px);
  box-shadow: none;
}

#breakDec {
  position: relative;
  left: -10px;
}

#breakInc {
  position: relative;
  right: -10px;
}

#sessionDec {
  position: relative;
  left: -10px;
}

#sessionInc {
  position: relative;
  right: -10px;
}

.switch {
  display: inline-block;
  width: 5px;
  margin: auto;
  position: relative;
}

#switchButton {
  background-color: black;
  width: 10px;
  height: 10px;
  margin-top: -43px;
  margin-left: -11px;
}

#switchLabel {
  font-size: 14px;
  display: inline-block;
  position: relative;
  top: -28px;
  left: -21px;
}

#reset {
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 15px;
  background-color: #FF0000;
  color: black;
  font-size: 13px;
  height: 40px;
  width: 100px;
  display: block;
  position: relative;
  left: 27px;
}

#startPause {
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 15px;
  height: 40px;
  width: 100px;
  color: black;
  font-size: 13px;
  background-color: #00CC00;
  display: block;
  position: relative;
  left: 27px;
}

@media only screen and (min-width: 400px) {
      
      .clock {
        width: 400px;
      }

      .screen {
        width: 350px;
      }

      .settingValue {
        margin-left: -28px;
        margin-right: -27px;
      }

      .dial {
        width: 170px;
      }
      
      .dialLabel {
        font-size: 20px;
      }

      .switch {
        width: 25px;
      }
      
      #switchButton {
        margin-left: 0px;
      }

      #switchLabel {
        left: -11px;
      }
      
      #reset {
        width: 119px;
        font-size: 16px;
      }
      
      #startPause {
        width: 119px;
        font-size: 16px;
      }
}