:root {
  /*========== Colors ==========*/
  --clock-hue-color: 240;

  --clock-first-color: hsl(var(--clock-hue-color), 53%, 49%);
  --clock-title-color: hsl(var(--clock-hue-color), 12%, 95%);
  --clock-text-color: hsl(var(--clock-hue-color), 12%, 75%);
  --clock-text-color-light: hsl(var(--clock-hue-color), 12%, 65%);
  --clock-white-color: #FFF;
  --clock-body-color: hsl(var(--clock-hue-color), 10%, 16%);

  /*========== Font and typography ==========*/
  --clock-body-font: 'Poppins', sans-serif;
  --clock-time-font-size: 4rem;
  --clock-city-font-size: 2rem;

  /*========== Font weight ==========*/
  --clock-font-medium: 500;
}

article.world-clock {
	font-family: var(--clock-body-font);
	background-color: var(--clock-body-color);
	color: var(--clock-text-color);
}

.clocks_container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	height: 100vh;
	width: 100vw;
}

.clock_circle {
  position: relative;
  /*margin-left: 2.5vw;*/
  margin-bottom: 3vw;
  width: 35vw;
  height: 35vw;
  box-shadow: 6px 6px 16px hsla(var(--clock-hue-color), 8%, 12%, 1), 
              -6px -6px 16px hsla(var(--clock-hue-color), 8%, 20%, 1), 
              inset -6px -6px 16px hsla(var(--clock-hue-color), 8%, 20%, 1), 
              inset 6px 6px 12px hsla(var(--clock-hue-color), 8%, 12%, 1);
  border-radius: 50%;
  justify-self: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.clock_info {
	width: 100%;
}

.clock_content {
  align-self: center;
  flex: 0 0 auto;
   width: 50vw;
   padding: 2% 5%;
}

.clock_twelve, 
.clock_three, 
.clock_six, 
.clock_nine {
  position: absolute;
  width: 1rem;
  height: 1px;
  background-color: var(--clock-text-color-light);
}

.clock_twelve, 
.clock_six {
  transform: translateX(-50%) rotate(90deg);
}

.clock_twelve {
  top: 1.25rem;
  left: 50%;
}

.clock_three {
  top: 50%;
  right: .75rem;
}

.clock_six {
  bottom: 1.25rem;
  left: 50%;
}

.clock_nine {
  left: .75rem;
  top: 50%;
}

.clock_rounder {
  width: 1rem;
  height: 1rem;
  background-color: var(--clock-first-color);
  border-radius: 50%;
  border: 2rem solid var(--clock-body-color);
}

.clock_hour, 
.clock_minutes, 
.clock_seconds {
  position: absolute;
  display: flex;
  justify-content: center;
}

.clock_hour {
  width: 60%;
  height: 60%;
}

.clock_hour::before {
  content: '';
  position: absolute;
  background-color: var(--clock-text-color);
  width: .5rem;
  height: 45%;
  border-radius: .75rem;
}

.clock_minutes {
  width: 80%;
  height: 80%;
}

.clock_minutes::before {
  content: '';
  position: absolute;
  background-color: var(--clock-text-color);
  width: .5rem;
  height: 45%;
  border-radius: .75rem;
}

.clock_seconds {
  width: 75%;
  height: 75%;
}

.clock_seconds::before {
  content: '';
  position: absolute;
  background-color: var(--clock-first-color);
  width: .25rem;
  height: 80%;
  border-radius: .75rem;
}

.clock_time_container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.clock_time {
  font-size: var(--clock-time-font-size);
  font-weight: var(--clock-font-medium);
  color: var(--clock-title-color);
  width: 40%;
}

.clock_time_divider {
	width: unset;
}

.clock_time_hour {
	text-align: right;
}

.clock_time_min {
	text-align: left;
}

.clock_title {
	text-align: center;
	font-size: var(--clock-city-font-size);
	font-weight: var(--clock-font-medium);
}