@font-face {
  font-family: "Orbitron";
  /* src: url(/css/TimeTravelerPal-Normal-Regular.ttf) format("truetype"); */
  src: url(/css/font/Orbitron-VariableFont_wght.ttf) format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "ShareTechMono";
  src: url(/css/font/ShareTechMono-Regular.ttf) format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "RedHatMono";
  src: url(/css/font/RedHatMono-VariableFont_wght.ttf) format("truetype");
  font-weight: 400;
}

.date {
  font-size: 3rem;
}
.clock {
  /* color: #d9ed92; */
  color: #fca311;
}
.dark-mode .clock {
  /* color: #edf6f9; */
  color: #edf6f9;
}
.clock-time {
  line-height: 1.2;
  font-size: 15rem;
}
.clock-time .sec {
  font-size: 5rem;
}

/* .colon { */
/* font-family: "RedHatMono", monospace; */
/* font-family: "ShareTechMono", monospace; */
/* font-family: "Orbitron", monospace; */
/* } */

.clock .hour,
.clock .min,
.clock .sec {
  font-family: "RedHatMono", monospace;
  /* font-family: "ShareTechMono", monospace; */
  /* font-family: "Orbitron", monospace; */
}

.pointColon {
  opacity: 5;
  -webkit-animation: digit 2s ease-in-out infinite;
  -moz-animation: digit 2s ease-in-out infinite;
  animation: digit 2s ease-in-out;
}
@keyframes digit {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes digit-01 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.8;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes digit-old {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}