@font-face {

  font-family: "FX_LED";

  src: url("https://cdn.jsdelivr.net/gh/codetheworld-io/static-files/FX-LED.TTF");

}

@font-face {

  font-family: "hack";

  src: url("https://cdn.jsdelivr.net/gh/codetheworld-io/static-files/Hack-Bold.ttf");

}



.digital-clock {

  background-color: #000;

  /* color: #fff; */

  color: #0ddc06;

  display: flex;

  border-radius: 1rem;

  user-select: none;

  padding: 0 1rem;

  border: 0.4rem solid #2d2d2d;

  white-space: nowrap;

}

.digital-clock .week {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  font-size: 60%;

  width: 0.2rem;

  color: #2d2d2d;

  font-weight: bold;

  font-family: "hack";

  padding-right: 1rem;

}



.digital-clock .week .active {

  color: white;

}

.digital-clock .time {

  font-family: "FX_LED";

}

.digital-clock .time .hour,

.digital-clock .time .min,

.digital-clock .time .sec,

.digital-clock .time .dot {

  display: inline-block;

  font-size: 4.7rem;

}

.digital-clock .time .invsi {

  visibility: hidden;

}