@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro&display=swap');
@import url('base.css');

:root {
  --hourPct: 0;
  --minutePct: 0;
  --secondDeg: 0;
}

body {
    background: black;
    padding: 0px;
    margin: 0px;
}

.time-numbers {
    display: none;
}

.time {
}

.date {
  
}

#date {
  float: left;
  clear: left;
  
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;

  font-size: 5vmin;
  width: 100%;
  padding-top: 4vmin;
}

#date-block {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}

#time {

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  
  align-items: center;
  justify-content: center;

  padding: 4vmin;
  border-radius: 10vmin;
  
  letter-spacing: -1vmin;
}

.time.divider::after {
  content: ":";
}

.date.divider::after {
  content: "-";
}

#date-leader::after {
}

#date-trailer::after {
}

#date-trailer {
}

.clock {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: #bababa;
    font-size: 22vmin;
    font-family: 'Anonymous Pro', monospace;
   
    padding: 5vmin;

    width: 85vmin;
}