:root {
  color-scheme: light dark;
}

@font-face {
  font-family: digital-7-mono;
  src: url("vendor/digital-7-mono.ttf") format("truetype");
}

@font-face {
  font-family: digital-7;
  src: url("vendor/digital-7.ttf") format("truetype");
}

body,
div,
span {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  background: light-dark(#f2f2f2, #202020);
}

* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.bpm-app {
  flex: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
}

a#update-bar {
  background: rgba(0, 0, 0, 0.8);
  color: rgba(255, 255, 255, 0.75);
  width: 100%;
  font-size: 5vh;
  font-family: Helvetica, "Tahoma", sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 0 2vh;
  box-sizing: border-box;

  height: 10vh;
  transition: height 0.25s;
}

a#update-bar:hover {
  color: rgba(255, 255, 255, 0.75);
}

a#update-bar.hidden {
  height: 0;
}

.header,
.event-select select {
  font-size: 5vh;
  /* Would use Roboto, except that primes (') are easier to read in Helvetica. */
  font-family: Helvetica, "Tahoma", sans-serif;
  color: white;
}

.header {
  flex: 0 0 auto;
  width: 100%;
  padding: 0.25em 0;
  background: #0c5093;
  /*border-bottom: 1px solid rgba(0, 0, 0, 0.1);*/
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
  flex-wrap: wrap;
}

.event-select {
  flex: 0 0 auto;
  border: 1px solid rgba(0, 0, 0, 0.25);
  padding: 0 0.3em;
  margin: 0.25em 1em;
  background: rgba(255, 255, 255, 0.25);
}

.event-select .cubing-icon {
  vertical-align: middle;
}

.event-select select {
  vertical-align: middle;
  height: 1.5em;
  border: 0px solid white;
  cursor: pointer;
  background: none;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.scramble-text {
  flex: 1 0 65vw;
  white-space: normal;
  margin: 0.25em 1em;
  text-align: center;
}

@supports ((text-align-last: center) or (-moz-text-align-last: center)) {
  .scramble-text {
    text-align: justify;
    text-align-last: center;
    -moz-text-align-last: center;
  }
}

.scramble-text.stale {
  opacity: 0.25;
}

.scramble-text.event-sq1,
.scramble-text.event-444,
.scramble-text.event-444bf {
  font-size: 4vh;
}

.scramble-text.event-555,
.scramble-text.event-555bf,
.scramble-text.event-clock {
  font-size: 3vh;
}

.scramble-text.event-666,
.scramble-text.event-777,
.scramble-text.event-minx {
  font-size: 2.5vh;
}

.display {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: background-color 0s;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Slow down transitions into some states. */
.display.ready {
  transition: background-color 0.5s, color 0.5s;
}

.display.handOnBpm,
.display.stopped {
  color: white;
}

.display-value {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1em;
}

.display-value > div {
  flex: auto;
}

.display-value {
  font-size: 30vw;
  font-family: digital-7-mono, monospace;
  margin-top: 5vh;
}

.display-value .period,
.display-value .first {
  font-family: digital-7, monospace;
}

.display-value .plus-minus {
  color: rgba(0, 0, 0, 0.35);
}

.invisible {
  opacity: 0;
}

@media (max-aspect-ratio: 1 / 1) {
  .display-value {
    font-size: 40vw;
  }
  .dot {
    display: none;
  }
  a#update-bar {
    font-size: 5vw;
  }
}

@media (min-aspect-ratio: 1 / 1) {
  .display-value {
    flex-direction: row;
    align-items: baseline;
    font-size: 20vw;
  }
  .invisible {
    display: none;
  }
}

@media (min-aspect-ratio: 2 / 1) {
  .display-value {
    font-size: 20vw;
  }
}

.display-value .sec-first {
  font-family: digital-7, monospace;
}

.display-value .decimals {
  font-size: 0.5em;
  line-height: 1em;
  opacity: 0.25;
}

.stats {
  background: white;
  border-top: 1px solid rgba(0, 0, 0, 0.25);
  color: black;
  width: 100%;
}

.stats select {
  font-size: 5vh;
  font-family: Roboto, Helvetica, "Tahoma", sans-serif;
  color: white;

  vertical-align: middle;
  height: 2.5em;
  /*width: 100%;*/
  padding: 0 2em;
  border: 0px solid white;
  cursor: pointer;
  background: none;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  text-align: center;
  text-align-last: center;
  color: rgba(0, 0, 0, 0.5);
}

.stats option {
  text-align: left;
}

body:not(.slow-transition) .header {
  transition: background 0s;
}

body.slow-transition .header {
  transition: background 0.25s;
}

body.flash .header {
  background: #4887c3;
}

#uncertainty {
  display: none;
}