@import url("https://fonts.cdnfonts.com/css/lcd");
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  overflow: hidden;
}
body {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0;
  background: black;
  font-family: "LCD", sans-serif;
  font-family: "LCD2", sans-serif;
  font-family: "LCDMono2", sans-serif;
  font-family: "LCDMono", sans-serif;
  font-family: "Digitalism", sans-serif;

  --_refl: #f3eeef;

  --_bloom: #fcfbf9;
  --_y1: #fae8a5;
  --_y2: #fbd608;

  --_o1: #ff8f0c;
  --_o2: #e74702;
  --_o3: #b32801;

  --mw1: #d0d5d7;

  --m1: #fdea09;
  --m2: #e46703;
  --m3: #ac2a04;
}

.clock {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc(var(--_size) * 0.01); /* em hack for shade scaling */

  --_factor: min(600px, 80vh);
  --_size: min(var(--_factor), 80vw);
}

@keyframes flicker {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 1;
  }
  11% {
    opacity: 0.8;
  }
  12% {
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  66% {
    opacity: 0.7;
  }
  67% {
    opacity: 0.9;
  }
  68% {
    opacity: 1;
  }
  69% {
    opacity: 0.4;
  }
  70% {
    opacity: 1;
  }
  100% {
    top: 1;
  }
}

.display {
  color: var(--_bloom);
  font-size: 14em;
  line-height: 0.8em;
  translate: 0 -0.4em;
}
.display .row {
  display: flex;
}
.display .small-row {
  font-size: 0.3em;
  position: absolute;
  right: -12%;
  top: 6%;
}
.display .small-row .row {
  flex-direction: column;
  line-height: 1.02em;
}
.display .row .col {
  display: flex;
  position: relative;
}
.display .row .col > div:nth-child(1) {
  opacity: 0.2;
}
.display .row .col > div:nth-child(2) {
  position: absolute;
  right: 0;
  z-index: 2;
}
.display .row .col > div:nth-child(3) {
  position: absolute;
  right: 0;
  color: var(--_bloom);
  --_o1-size: 0.1em;
  --_o2-size: 0.4em;
  --_o3-size: 0.6em;
  text-shadow: 0em 0em 0.04em var(--_bloom), 0em 0em 0.04em var(--_bloom),
    0em 0em var(--_o3-size) var(--_o3), 0em 0em var(--_o3-size) var(--_o3),
    0em 0em var(--_o3-size) var(--_o3), 0em 0em var(--_o3-size) var(--_o3),
    0em 0em var(--_o2-size) var(--_o2), 0em 0em var(--_o2-size) var(--_o2),
    0em 0em var(--_o2-size) var(--_o2), 0em 0em var(--_o2-size) var(--_o2),
    0em 0em var(--_o1-size) var(--_o1), 0em 0em var(--_o1-size) var(--_o1),
    0em 0em var(--_o1-size) var(--_o1), 0em 0em var(--_o1-size) var(--_o1);
  animation: 5s flicker linear infinite;
}