/* =========================
   Base / Reset
   ========================= */
html,
body {
  height: 100%;
  margin: 0;
  background-color: black;
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: red;
  font-family: 'Digital-7 Mono', monospace;
  font-size: 25vw;
  line-height: 1;
  user-select: none;
}

/* =========================
   Date Display
   ========================= */
#date {
  position: absolute;
  top: 5vh;
  color: inherit;
  font-family: 'Digital-7 Mono', monospace;
  text-align: center;
  line-height: 1.2em;
  user-select: none;
  width: 100%;
}

body.date-iso #date {
  font-size: 7vw;
}

body.date-local #date {
  font-size: 3vw;
}

/* =========================
   Clock Display
   ========================= */
#clock {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  letter-spacing: 0.2em;
}

.hours,
.minutes,
.seconds {
  display: inline-block;
}

.colon {
  display: inline-block;
  width: 0.5em;
  text-align: center;
}

/* =========================
   Controls Layout
   ========================= */
#controls {
  position: absolute;
  left: 0;
  bottom: 1vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  z-index: 10;
  pointer-events: auto;
}

.controls-row {
  width: 96%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.controls-row .left,
.controls-row .right {
  display: flex;
  align-items: center;
}

.controls-row .left > *:not(:last-child),
.controls-row .right > *:not(:last-child) {
  margin-right: 0.3em;
}

#controls > *:not(:last-child) {
  margin-bottom: 2.5vh;
}

/* =========================
   Buttons & Inputs
   ========================= */
button,
input[type="color"] {
  background: none;
  border: 1px solid gray;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  font-family: sans-serif;
  font-size: 1.6vh;
  padding: 0.25em 0.7em;
  line-height: 1;
}

button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

input[type="color"] {
  width: 3.5em;
  height: 2.2em;
  padding: 0;
  border: none;
}

#color-controls > *:not(:last-child) {
  margin-right: 0.9em;
}

#mode-controls > *:not(:last-child) {
  margin-right: 0.9em;
}

/* =========================
   State Modifiers
   ========================= */
body.show-seconds {
  font-size: 18vw;
}

/* =========================
   Responsive: Portrait
   ========================= */
@media (orientation: portrait) {
  #controls {
    bottom: 0.4vh;
  }

  #controls > *:not(:last-child) {
    margin-bottom: 0.9vh;
  }

  .controls-row {
    width: 95%;
  }

  button {
    font-size: 1.5vh;
    padding: 0.2em 0.6em;
  }

  #color-controls input[type="color"] {
    width: 3em;
    height: 1.5em;
  }

  #color-controls > *:not(:last-child) {
    margin-right: 2.1em;
  }

  #mode-controls > *:not(:last-child) {
    margin-right: 1em;
  }

  .controls-row .left > *:not(:last-child),
  .controls-row .right > *:not(:last-child) {
    margin-right: 0.25em;
  }
}

/* =========================
   Responsive: Landscape
   ========================= */
@media (orientation: landscape) {
  #controls {
    bottom: 2vh;
  }

  #controls > *:not(:last-child) {
    margin-bottom: 2vh;
  }

  .controls-row {
    width: 98%;
  }

  button {
    font-size: 2.2vh;
    padding: 0.4em 1em;
  }

  #color-controls input[type="color"] {
    width: 4.5em;
    height: 2.5em;
  }

  #color-controls > *:not(:last-child) {
    margin-right: 4em;
  }

  #mode-controls > *:not(:last-child) {
    margin-right: 0.8em;
  }

  .controls-row .left > *:not(:last-child),
  .controls-row .right > *:not(:last-child) {
    margin-right: 0.25em;
  }
}