html {
  font: 32px sans-serif;
  height: 100%;
  line-height: 1.5em;
  overflow: hidden;
  width: 100%;
}

body {
  background: #000;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 16px;
}

* {
  box-sizing: border-box;
  font-size: inherit;
}

button:active {
  opacity: 0.8;
}

.speed {
  background: #888;
  background-image: -webkit-linear-gradient(left, #0e1900, #0e1900 10%, #1c3301 10%, #1c3301 20%, #2a4c01 20%, #2a4c01 30%, #396602 30%, #396602 40%, #477f02 40%, #477f02 50%, #559903 50%, #559903 60%, #64b203 60%, #64b203 70%, #72cc04 70%, #72cc04 80%, #80e504 80%, #80e504 90%, #8fff05 90%, #8fff05 100%);
  background-image: -o-linear-gradient(left, #0e1900, #0e1900 10%, #1c3301 10%, #1c3301 20%, #2a4c01 20%, #2a4c01 30%, #396602 30%, #396602 40%, #477f02 40%, #477f02 50%, #559903 50%, #559903 60%, #64b203 60%, #64b203 70%, #72cc04 70%, #72cc04 80%, #80e504 80%, #80e504 90%, #8fff05 90%, #8fff05 100%);
  background-image: linear-gradient(to right, #0e1900, #0e1900 10%, #1c3301 10%, #1c3301 20%, #2a4c01 20%, #2a4c01 30%, #396602 30%, #396602 40%, #477f02 40%, #477f02 50%, #559903 50%, #559903 60%, #64b203 60%, #64b203 70%, #72cc04 70%, #72cc04 80%, #80e504 80%, #80e504 90%, #8fff05 90%, #8fff05 100%);
  flex: 1;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.speed.paused {
  background: #888;
  background-image: -webkit-linear-gradient(left, #0e0e0e, #0e0e0e 10%, #1c1c1c 10%, #1c1c1c 20%, #2a2a2a 20%, #2a2a2a 30%, #393939 30%, #393939 40%, #474747 40%, #474747 50%, #555 50%, #555 60%, #646464 60%, #646464 70%, #727272 70%, #727272 80%, #808080 80%, #808080 90%, #8f8f8f 90%, #8f8f8f 100%);
  background-image: -o-linear-gradient(left, #0e0e0e, #0e0e0e 10%, #1c1c1c 10%, #1c1c1c 20%, #2a2a2a 20%, #2a2a2a 30%, #393939 30%, #393939 40%, #474747 40%, #474747 50%, #555 50%, #555 60%, #646464 60%, #646464 70%, #727272 70%, #727272 80%, #808080 80%, #808080 90%, #8f8f8f 90%, #8f8f8f 100%);
  background-image: linear-gradient(to right, #0e0e0e, #0e0e0e 10%, #1c1c1c 10%, #1c1c1c 20%, #2a2a2a 20%, #2a2a2a 30%, #393939 30%, #393939 40%, #474747 40%, #474747 50%, #555 50%, #555 60%, #646464 60%, #646464 70%, #727272 70%, #727272 80%, #808080 80%, #808080 90%, #8f8f8f 90%, #8f8f8f 100%);
  flex: 1;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.speed::before {
  background-image: url(/www/img/speed.svg);
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  position: absolute;
  left: 5%;
  bottom: 5%;
  width: 10%;
  height: 100%;
}

.speed::after {
  background-image: url(/www/img/speed.svg);
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  position: absolute;
  right: 5%;
  bottom: 5%;
  width: 10%;
  height: 100%;
  -webkit-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
}

.speed__indicator {
  background: #fff;
  height: 100%;
  left: 50%;
  margin-left: -10px;
  opacity: 0.7;
  position: absolute;
  width: 20px;
}

.status-bar {
  color: white;
  flex: 0 1.5em;
}

.status-bar__connectivity {
  background: #888;
  border: 0.05rem solid rgba(255, 255, 255, 0.2);
  border-radius: 0.5em;
  display: inline-block;
  height: 0.6em;
  width: 0.6em;
}

.status-bar__connectivity.error {
  background: #F04848;
}

.status-bar__connectivity.open {
  background: #72cc04;
}

.buttons {
  display: flex;
  flex: 1;
  width: 100%;
}

.reset, .play, .back, .forward {
  border: 4px solid rgba(255, 255, 255, 0.2);
  flex: 1;
  margin: 0;
}

.reset {
  background: #F57B2E url(/www/img/reset.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 50%;
}

.back {
  background: #3776e6 url(/www/img/jump.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 50%;
}

.forward {
  background: #3776e6 url(/www/img/jump.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 50%;
  -webkit-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
}

.play {
  background: #808080 url(/www/img/pause.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 50%;
  color: #fff;
}

.play.paused {
  background: #72cc04 url(/www/img/play.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 50%;
}