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;
  overflow: hidden;
}

.art {
  cursor: zoom-in;
  margin: 5vw 0;
  padding: 5vw;
  box-shadow: -26px -4px 20px #00000040; /*More Real*/
  background-color: #00000005;
  cursor: crosshair; 
}

.art--full {
  cursor: zoom-out;
}

.text {
  margin-bottom: 5vw;
  text-align: center;
}

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

.digit {
  float: left;
}

.clock {
  --small-hand: -135deg;
  --large-hand: -45deg;
  margin: .3vw;
  width: 10vw;
  height: 10vw;
  border-radius: 50%;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.35);
  float: left;
  background-color: #0000006; /*More Real*/
}
.clock:nth-of-type(2n+1) {
  clear: left;
}

.clock-smallHand,
.clock-largeHand {
  -webkit-transform-origin: 50px center;
          transform-origin: 50px center;
  transition: -webkit-transform 8s;
  transition: transform 8s;
  transition: transform 8s, -webkit-transform 8s;
}

.clock-smallHand {
  -webkit-transform: rotateZ(var(--small-hand));
          transform: rotateZ(var(--small-hand));
}

.clock-largeHand {
  -webkit-transform: rotateZ(var(--large-hand));
          transform: rotateZ(var(--large-hand));
}

.s-hidden {
  display: none;
}

.trigger {
  position: fixed;
  bottom: 0;
  width: 25%;
  height: 5vw;
  cursor: help;
}

.trigger--left {
  left: 0;
}

.trigger--right {
  right: 0;
}