* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

body {
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#app {
  text-align: center;
}

.clock {
  height: auto;
  color: white;
  font-size: calc(10px + 15vmin);
  font-family: sans-serif, Arial, sans-serif;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.clock > div {
  display: flex;
}

.tick {
  line-height: 0.8;
}

.move {
  animation: move linear 1s infinite;
}

.seconds {
  font-size: calc(3px + 5vmin);
}

@keyframes move {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}

.clock .number {
  font-family: 'Kontrapunkt Light', sans-serif, Arial, sans-serif;
}

.date {
  font-family: 'Kontrapunkt Light', sans-serif, Arial, sans-serif;
  color: white;
  font-size: calc(10px + 5vmin);
  margin-top: 2vh;
}

@media (max-width: 768px) {
  .clock {
    font-size: calc(17px + 8vmin);
  }

  .seconds {
    font-size: calc(4px + 3vmin);
  }

  .date {
    font-size: calc(5px + 5vmin);
    margin-top: 1vh;
  }
}

@media (max-width: 480px) {
  .clock {
    font-size: calc(15px + 8vmin);
  }

  .seconds {
    font-size: calc(3px + 3vmin);
  }

  .date {
    font-size: calc(10px + 5vmin);
    margin-top: 1vh;
  }
}