[data-element="timezone"] a {
  color: var(--paragraph-alt);
}

[data-element="timezone"] a:hover {
  color: var(--white);
  text-decoration: none;
}

[data-element="timezone"] .timezone-block {
  display: flex;
  align-items: center;
}

/* Clock */
:root {
  --second: 1s;
  --minute: calc(var(--second) * 60);
  --hour: calc(var(--minute) * 60);
}

@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(1turn);
  }
}

/* Clock */
:root {
  --second: 1s;
  --minute: calc(var(--second) * 60);
  --hour: calc(var(--minute) * 60);
}

@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(1turn);
  }
}

.clock-wrapper {
  margin-right: 10px;
}

.clock {
  --timeShiftHour: calc(var(--setTimeHour) * var(--hour));
  --timeShiftMinute: calc(var(--setTimeMinute) * var(--minute));
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--grey);
  position: relative;
  transform: rotate(180deg);
  border: 2px solid var(--border);
}

.hand {
  position: absolute;
  top: 50%;
  left: calc(50% - var(--width) / 2);
  width: var(--width);
  height: var(--height);
  background-color: var(--color);
  border-radius: calc(var(--width) / 2);
  transform-origin: center 0;
}

.second {
  --width: 1.6px;
  --height: 40%;
  --color: var(--border);
}

.minute {
  --width: 1.6px;
  --height: 44%;
  --color: var(--paragraph);
}

.hour {
  --width: 1.6px;
  --height: 25%;
  --color: var(--paragraph);
}

.second.hand {
  animation: rotate steps(60) var(--minute) infinite;
}

.minute.hand {
  animation: rotate linear var(--hour) infinite;
  animation-delay: calc(var(--timeShiftMinute) * -1);
}

.hour.hand {
  animation: rotate linear calc(var(--hour) * 12) infinite;
  animation-delay: calc((var(--timeShiftHour) + var(--timeShiftMinute)) * -1);
}