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

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Source Sans Pro", sans-serif;
  color: #4a4a4a;
  cursor: default;
}

a {
  color: #8a8a8a;
  text-decoration: none;
}

#videoButton, #removeVideoButton {
  position: fixed;
  width: 100%;
  height: 50px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1000;
}

#videoButton {
  bottom: 0;
}

#removeVideoButton {
  top: 0;
}

#clockButton, #removeClockButton {
  position: fixed;
  width: 50px;
  height: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1000;
}

#clockButton {
  left: 0;
}

#removeClockButton {
  right: 0;
}

#backgroundVideo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.art path {
  fill: #4a4a4a;
}

.text {
  text-align: center;
}

.digit {
  float: left;
}

.clock {
  --small-hand: -135deg;
  --large-hand: -45deg;
  margin: 0.3vw;
  width: 10vw;
  height: 10vw;
  border-radius: 50%;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
  float: left;
}
.clock:nth-of-type(2n+1) {
  clear: left;
}
.clock-smallHand,
.clock-largeHand {
  transform-origin: 50px center;
  transition: transform 10s;
}
.clock-smallHand {
  transform: rotateZ(var(--small-hand));
}
.clock-largeHand {
  transform: rotateZ(var(--large-hand));
}

.dark {
  background-color: #000;
}
.dark .art path {
  fill: #f0f0f0;
}
.dark a {
  color: #f0f0f0;
}
.dark .clock {
  box-shadow: inset 0 1px 3px rgba(74, 74, 74, 0.25);
}

.video-playing .clock-smallHand, 
.video-playing .clock-largeHand {
  fill: rgba(230, 230, 230, 0.80) !important;
}

.video-playing.dark .clock-smallHand, 
.video-playing.dark .clock-largeHand {
  fill: rgba(75, 75, 75, 0.80) !important;
}