style.css

:root {
  /* dynamic chaos */
  --chaos: #e81b23;
  /* static order  */
  --order: #e81b23;
  --order-clock: #e81b23;
  /* inverted chaos */
  /* --inverted:#17e4dc; */
}

@font-face {
  font-family: digiFont;
  src: url(DS-DIGI.TTF);
  font-display: swap;
}
/*css reset*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

[data-hour^='1'] .digit-1 [class*='1'],
[data-hour^='2'] .digit-1 [class*='2'],
[data-hour^='3'] .digit-1 [class*='3'],
[data-hour^='4'] .digit-1 [class*='4'],
[data-hour^='5'] .digit-1 [class*='5'],
[data-hour^='6'] .digit-1 [class*='6'],
[data-hour^='7'] .digit-1 [class*='7'],
[data-hour^='8'] .digit-1 [class*='8'],
[data-hour^='9'] .digit-1 [class*='9'],
[data-hour^='0'] .digit-1 [class*='0'],
[data-hour$='1'] .digit-2 [class*='1'],
[data-hour$='2'] .digit-2 [class*='2'],
[data-hour$='3'] .digit-2 [class*='3'],
[data-hour$='4'] .digit-2 [class*='4'],
[data-hour$='5'] .digit-2 [class*='5'],
[data-hour$='6'] .digit-2 [class*='6'],
[data-hour$='7'] .digit-2 [class*='7'],
[data-hour$='8'] .digit-2 [class*='8'],
[data-hour$='9'] .digit-2 [class*='9'],
[data-hour$='0'] .digit-2 [class*='0'],
[data-minute^='1'] .digit-3 [class*='1'],
[data-minute^='2'] .digit-3 [class*='2'],
[data-minute^='3'] .digit-3 [class*='3'],
[data-minute^='4'] .digit-3 [class*='4'],
[data-minute^='5'] .digit-3 [class*='5'],
[data-minute^='6'] .digit-3 [class*='6'],
[data-minute^='7'] .digit-3 [class*='7'],
[data-minute^='8'] .digit-3 [class*='8'],
[data-minute^='9'] .digit-3 [class*='9'],
[data-minute^='0'] .digit-3 [class*='0'],
[data-minute$='1'] .digit-4 [class*='1'],
[data-minute$='2'] .digit-4 [class*='2'],
[data-minute$='3'] .digit-4 [class*='3'],
[data-minute$='4'] .digit-4 [class*='4'],
[data-minute$='5'] .digit-4 [class*='5'],
[data-minute$='6'] .digit-4 [class*='6'],
[data-minute$='7'] .digit-4 [class*='7'],
[data-minute$='8'] .digit-4 [class*='8'],
[data-minute$='9'] .digit-4 [class*='9'],
[data-minute$='0'] .digit-4 [class*='0'],
[data-second^='1'] .digit-5 [class*='1'],
[data-second^='2'] .digit-5 [class*='2'],
[data-second^='3'] .digit-5 [class*='3'],
[data-second^='4'] .digit-5 [class*='4'],
[data-second^='5'] .digit-5 [class*='5'],
[data-second^='6'] .digit-5 [class*='6'],
[data-second^='7'] .digit-5 [class*='7'],
[data-second^='8'] .digit-5 [class*='8'],
[data-second^='9'] .digit-5 [class*='9'],
[data-second^='0'] .digit-5 [class*='0'],
[data-second$='1'] .digit-6 [class*='1'],
[data-second$='2'] .digit-6 [class*='2'],
[data-second$='3'] .digit-6 [class*='3'],
[data-second$='4'] .digit-6 [class*='4'],
[data-second$='5'] .digit-6 [class*='5'],
[data-second$='6'] .digit-6 [class*='6'],
[data-second$='7'] .digit-6 [class*='7'],
[data-second$='8'] .digit-6 [class*='8'],
[data-second$='9'] .digit-6 [class*='9'],
[data-second$='0'] .digit-6 [class*='0'],
.dots,
.active {
  fill: var(--order-clock);
}

.dots,
.digit {
  fill: #242c447c;
}

.dots > .active {
  animation: flicker 100s linear infinite;
}

svg {
  margin: 2vw;
  overflow: hidden;
}

body {
  margin: 0;
  padding: 40px;
  min-height: 100vh;
  background: #000;
  font-family: digiFont;
  box-sizing: border-box;
}

.main {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.clock-container {
  margin: 3rem 0rem;
  width: 80%;
  padding: 2vw;
  border: 5px solid lighten(var(--order), 30%);
  border-radius: 60px;
  transform: skewX(-3deg);
  animation: flicker 100s linear infinite;
}

.button-container {
  width: 500px;
  margin-top: 3.5rem;
  display: inherit;
  justify-content: center;
  align-items: center;
}

button {
  font-family: digiFont;
  background: #000;
  margin: 2rem;
  padding: 0.5rem 1rem;
  color: var(--chaos);
  font-weight: 700;
  letter-spacing: 4px;
  font-size: 2rem;
  outline: none;
}

#colorPicker {
  width: 52px;
  height: 52px;
  margin: 2rem;
  border: none;
  -webkit-appearance: none;
  background: #000;
  outline: none;
}

#colorPicker:hover {
  cursor: pointer;
  animation: flicker-picker 1.997s linear infinite;
}

#colorPicker:active {
  background: #000;
  border: none;
}

button:hover {
  cursor: pointer;
  /* color: var(--inverted); */
  color: var(--chaos);
  background: #000;
  animation: flicker-btn 3.11s linear infinite;
}

button:active {
  color: var(--chaos);
  background: #000;
}

/* frame animation */
@keyframes flicker {
  1.5%,
  4.4%,
  4.471%,
  6.66%,
  6.8%,
  7%,
  17.08%,
  17.15%,
  25%,
  25.3%,
  30.08%,
  30.15%,
  35%,
  35.4%,
  35.7%,
  50%,
  50.2%,
  66.5%,
  66.9%,
  72%,
  84.5%,
  84.9%,
  92.1%,
  92.6%,
  93.1%,
  94%,
  94.4%,
  95%,
  95.5%,
  96.8%,
  97%,
  98% {
    box-shadow: 0 0 90px var(--chaos), 0 0 40px var(--chaos) inset;
    fill: var(--chaos);
  }
  4.47%,
  6.7%,
  6.9%,
  17.1%,
  25.1%,
  30.1%,
  35.1%,
  35.5%,
  50.1%,
  66.6%,
  69%,
  84.6%,
  85%,
  92.4%,
  93.5%,
  94.5%,
  95.1%,
  97.9% {
    box-shadow: 0 0 40px #000, 0 0 20px #000 inset;
    fill: #242c447c;
  }

  99.5% {
    box-shadow: 0 0 100px var(--chaos), 0 0 300px var(--chaos) inset;
  }
  0% {
    box-shadow: 0 0 300px var(--chaos), 0 0 600px var(--chaos) inset;
  }
}

@keyframes flicker-btn {
  0%,
  4%,
  4.4%,
  12%,
  13%,
  21.5%,
  22%,
  23.5%,
  24%,
  66.5%,
  67%,
  84.5%,
  85%,
  100% {
    box-shadow: 0 -10px 40px var(--chaos), 0 0 20px var(--chaos);
  }
  4.1%,
  12.5%,
  21.8%,
  23.8%,
  66.8%,
  84.8% {
    box-shadow: 0 0 10px #000, 0 5px 10px var(--chaos);
  }
}

@keyframes flicker-picker {
  0%,
  4%,
  4.4%,
  12%,
  13%,
  21.5%,
  22%,
  23.5%,
  24%,
  66.5%,
  67%,
  84.5%,
  85%,
  100% {
    box-shadow: 0 -3px 45px var(--chaos);
  }
  4.1%,
  12.5%,
  21.8%,
  23.8%,
  66.8%,
  84.8% {
    box-shadow: 0 0 20px #000;
  }
}

.scanlines {
  pointer-events: none;
  z-index: -100;
  overflow: hidden;
  mix-blend-mode: difference;
}

.scanlines::before {
  pointer-events: none;
  z-index: -1;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: repeating-linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.05) 0.5%, transparent 1%);
}

@media (max-width: 400px) {
  .button-container {
    flex-flow: column;
    justify-content: center;
  }
}