@import url('https://fonts.googleapis.com/css?family=Share+Tech+Mono');

* {
  font-family: 'Share Tech Mono', monospace;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: black;
  color: #33ccff;
}

main {
  width: 100%;
  height: 100%;
}

footer {
  position: absolute;
  top: auto;
  bottom: 0;
  width: 100%;
}

footer, h2 {
  text-align: center;
  letter-spacing: .2rem;
}

#clock, .time {
  position: relative;
  display: flex;
  flex-direction: row;
}

#clock {
  width: 480px;
  top: 25%;
  margin: 0 auto;
}

.time.minutes {
  left: 32px;
}

.time.seconds {
  left: 64px;
}

.display {
  position: absolute;
  top: auto;
  bottom: -32px;
  left: 24px;
  letter-spacing: 3.2rem;
}

.bit {
  width: 48px;
  height: 48px;
  margin: 8px;
  background: #33ccff;
  box-shadow: 0 0 16px #33ccff;
  transition: all .5s ease-out;
}

.bit.blank {
  background: black;
  box-shadow: none;
}

@media only screen
and (min-width: 320px)
and (max-device-width: 768px)
and (orientation: landscape)
{
  #clock {
    top: 15%;
  }
}