body {
  background-color: #fff;
  color: #333;
  font-family: sans-serif;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 100%);
  scroll-snap-type: both mandatory;
  overflow-x: scroll;
  overflow-y: scroll;
}

section {
  width: 100vw;
  height: 100vh;
  display: grid;
  justify-content: center;
  align-content: center;
  scroll-snap-align: start;
}

section:nth-child(1) { background: rgb(212, 106, 106); }
section:nth-child(2) { background: rgb(128, 21, 21); }
section:nth-child(3) { background: rgb(85, 0, 0); }

section:nth-child(4){ background: rgb(83, 90, 146); }
section:nth-child(5){ background: rgb(24, 32, 88); }
section:nth-child(6){ background: rgb(8, 14, 59); }

section:nth-child(7){ background: rgb(112, 76, 143); }
section:nth-child(8){ background: rgb(55, 19, 86); }
section:nth-child(9){ background: rgb(33, 4, 57); }

pre {
  color: #fff;
  font-size: 8em;
  margin: 0;
}

div[data-component=clock] {
  font-size: 1em;
  color: #e2e2e2;
  text-align: center;
}