.main_1 .clock {
  font-family: "Manrope", sans-serif;
}
.main_1 .clock#date {
  display: block;
  font-family: "Manrope", sans-serif;
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--text);
  text-align: center;
}
.main_1 .clock#time {
  display: block;
  font-family: "Manrope", sans-serif;
  font-size: clamp(5.8rem, 12vw, 9.8rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.08em;
  color: var(--text);
  min-width: 6.2ch;
  display: inline-block;
  vertical-align: baseline;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.main_1 .clock#time:hover {
  cursor: pointer;
}
.main_1 .clock#apm {
  font-family: "Manrope", sans-serif;
  font-size: clamp(2.6rem, 4vw, 3.8rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  color: var(--primary);
  width: 1.9ch;
  text-align: right;
  display: inline-block;
  line-height: 1;
  vertical-align: baseline;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.main_extra {
  padding: 5% 0%;
}
.main_extra .extra_container .utc_pop, .main_extra .extra_container .utc_time {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
  padding: 0% 5% 5% 5%;
}
.main_extra .extra_container .utc_pop li, .main_extra .extra_container .utc_time li {
  border: 1px solid black;
  border-radius: 3px;
  flex-grow: 1;
  padding: 1%;
}
.main_extra .extra_container .utc_pop li:hover, .main_extra .extra_container .utc_time li:hover {
  background-color: rgb(200, 200, 200);
  border-radius: 5px;
}
.main_extra .extra_container .utc_pop a, .main_extra .extra_container .utc_time a {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: min(3vw, 1.5rem);
}
.main_extra .extra_container .utc_nations {
  padding: 0% 5%;
}
.main_extra .extra_container .utc_nations .utcn_list {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  list-style: none;
  color: black;
}
.main_extra .extra_container .utc_nations .utcn_list #utcn_title {
  display: block;
  flex-basis: 40%;
  border: 1px solid black;
  border-radius: 3px;
  padding: 1%;
}
.main_extra .extra_container .utc_nations .utcn_list #utcn_title:hover {
  background-color: rgb(200, 200, 200);
  border-radius: 5px;
}
.main_extra .extra_container .utc_nations .utcn_list #utcn_title a {
  font-family: "Inter", sans-serif;
  font-size: min(3vw, 1.5rem);
}
.main_extra .extra_container .utc_nations .utcn_list #utcn_content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex-basis: 60%;
  border: 1px solid black;
  border-radius: 3px;
  justify-content: center;
  padding: 1% 1%;
}
.main_extra .extra_container .utc_nations .utcn_list #utcn_content a {
  font-family: "Inter", sans-serif;
  font-size: min(3vw, 1.5rem);
}

@media screen and (max-width: 700px) {
  .main_1 .clock#date {
    font-size: clamp(1rem, 4.2vw, 1.35rem);
  }
  .main_1 .clock#time {
    font-size: clamp(4.4rem, 19.6vw, 6rem);
    font-weight: 400;
    letter-spacing: -0.06em;
  }
  .main_1 .clock#apm {
    font-size: clamp(1.05rem, 4.8vw, 1.5rem);
    min-width: 1.9ch;
    width: 1.9ch;
  }
  .main_1 .clock#msec {
    font-size: clamp(1.05rem, 4.8vw, 1.5rem);
    min-width: 2ch;
    width: 2ch;
  }
}

@media screen and (max-width: 420px) {
  .main_1 .clock#date {
    font-size: clamp(0.95rem, 4vw, 1.2rem);
  }
  .main_1 .clock#time {
    font-size: clamp(3.9rem, 19vw, 5.2rem);
    font-weight: 400;
    line-height: 1;
  }
  .main_1 .clock#apm {
    font-size: clamp(0.95rem, 4.6vw, 1.3rem);
    min-width: 1.9ch;
    width: 1.9ch;
  }
  .main_1 .clock#msec {
    font-size: clamp(0.95rem, 4.6vw, 1.3rem);
    min-width: 2ch;
    width: 2ch;
  }
}