@font-face {
  font-family: Digital;
  src: url("../font/digital.ttf");
}
html, body {
  font-family: Digital;
  min-width: 320px;
  margin: 0;
  background-color: #eee;
}

#root {
  display: flex;
  flex-direction: column;
  font-size: 5vmin;
}

#timer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

#timer > [id^=time] {
  text-align: center;
  width: 100%;
}
#timer > #time-left {
  background-color: black;
  color: #00ffaa;
  font-size: 10vmin;
  margin: 10px;
  border: 10px solid black;
  text-shadow: 0px 0px 10px turquoise;
  box-shadow: inset 0px 0px 100px blue;
}
#timer > #time-left.paused {
  color: yellow;
  text-shadow: 0 0 10px yellow;
}
#timer > #start_stop, #timer > #reset {
  width: 45%;
  text-align: center;
  cursor: pointer;
  font-size: 10vmin;
  border: 2px solid black;
  margin: 10px 10px 20px 10px;
  background-color: #eee;
  box-shadow: 5px 10px 0 #000, 0px 5px 0 #000, 5px 5px 0 #000, 5px 10px 0 #000;
  border-radius: 15px;
  user-select: none;
  -webkit-user-select: none;
}
#timer > #start_stop:active, #timer > #reset:active {
  transform: translateY(10px) translateX(5px);
  box-shadow: 0px 0px 0px;
  filter: brightness(0.9);
}
#timer > #start_stop {
  background-color: #00ffaa;
  border: 2px solid #00aa66;
  box-shadow: 5px 10px 0 #00aa66, 0px 5px 0 #00aa66, 5px 5px 0 #00aa66, 5px 10px 0 #00aa66;
}
#timer > #start_stop.playing {
  background-color: #ffff55;
  border: 2px solid #aaaa55;
  box-shadow: 5px 10px 0 #aaaa55, 0px 5px 0 #aaaa55, 5px 5px 0 #aaaa55, 5px 10px 0 #aaaa55;
}
#timer > #start_stop.playing:active {
  transform: translateY(10px) translateX(5px);
  box-shadow: 0px 0px 0px;
}
#timer > #reset {
  background-color: #ff00aa;
  border: 2px solid #aa0066;
  box-shadow: 5px 10px 0 #aa0066, 0px 5px 0 #aa0066, 5px 5px 0 #aa0066, 5px 10px 0 #aa0066;
}

#timer::after {
  content: "Settings";
  display: block;
  width: 100%;
  text-align: center;
  margin: 20px;
}

#settings {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

#setting {
  display: flex;
  flex-wrap: wrap;
  margin: 10px;
  justify-content: center;
  width: 45%;
}
#setting div {
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
}

#setting > [id$=label] {
  width: 100%;
  margin: 5px;
}

#setting > [id$=length] {
  background-color: darkblue;
  color: turquoise;
  order: 2;
  font-size: 10vmin;
  flex: 1 1 20%;
  box-shadow: inset 0 0 10px blue, 0px 5px black;
  border-top: 7px solid black;
  border-bottom: 2px solid black;
  border-left: 5px solid black;
  border-right: 5px solid black;
  text-shadow: 0 0 10px;
}
#setting > [id$=length].bottom-limit {
  color: orange;
  background-color: #995500;
  box-shadow: inset 0 0 10px orange, 0px 5px black;
}
#setting > [id$=length].limit-cue {
  background-color: #550000;
  color: red;
  box-shadow: inset 0 0 10px red, 0px 5px black;
}

#setting > [id$=crement] {
  background-color: lightgray;
  cursor: pointer;
  border: 2px solid black;
  box-shadow: 0 5px 0 black;
  font-size: 10vmin;
  flex: 1 1 20%;
}
#setting > [id$=crement]:active {
  transform: translateY(5px);
  box-shadow: 0 -5px 0 black;
  filter: brightness(0.9);
}
#setting > [id$=decrement] {
  order: 1;
  border-radius: 10px 0 0 10px;
  background-color: #00bbff;
  box-shadow: 0 5px 0 #0055aa;
  border: 2px solid #00bbff;
}
#setting > [id$=increment] {
  order: 3;
  border-radius: 0 10px 10px 0;
  background-color: #ff0055;
  box-shadow: 0 5px 0 #aa0055;
  border: 2px solid #ff0055;
}