@import url("https://fonts.googleapis.com/css?family=Lato:300&display=swap");
* {
  box-sizing: border-box;
}

body {
  font-family: "Lato", sans-serif;
}

div {
  height: 100vh;
  overflow: hidden;
}

.block-clock__day {
  background-color: #4F8F9A;
}

.block-clock__block {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  mix-blend-mode: hard-light;
}

.block-clock__block--hours {
  background-color: #91AA9D;
  color: #4F8F9A;
}

.block-clock__block--minutes {
  background-color: #3E606F;
  color: #91AA9D;
}

.block-clock__block--seconds {
  background-color: #193441;
  color: #3E606F;
}

h3 {
  font-size: 13vw;
  line-height: 1;
  font-weight: 300;
  margin: 0;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.block-clock__block--hours > h3 {
  margin-top: -13vw;
}

.block-clock__block--seconds > h3 {
  margin-top: 13vw;
}