@font-face {
  font-family: 'CocoGothicPro';
  src: url('CocoGothicPro-HvIt.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-width: 100vw;
  background: #2d2d2d;
  color: #fff;
  font-family: 'CocoGothicPro', Arial, sans-serif;
}

.clock-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 100vh;
  padding: 48px 0 0 56px;
}

.clock-title {
  font-family: 'CocoGothicPro', Arial, sans-serif;
  font-size: 3em;
  font-weight: normal;
  color: #fff;
  margin-bottom: 48px;
  letter-spacing: 2px;
  line-height: 1.1;
  text-shadow:
    0 4px 0 #181818,
    0 8px 24px #181818a0;
}

.clock-list {
  list-style: none;
  padding: 0;
  margin: 0 0 44px 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.clock-list li {
  display: flex;
  align-items: center;
  gap: 18px;
}

.clock-icon {
  width: 48px;
  height: 48px;
  margin-right: 4px;
  background: transparent;
  border-radius: 50%;
  object-fit: contain;
  box-shadow: 0 1px 4px #0005;
}

.clock-link,
.clock-link.clock-link-disabled {
  font-family: 'CocoGothicPro', Arial, sans-serif;
  font-size: 2.4em;  font-weight: normal;
  letter-spacing: 1.7px;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  background: none;
  border: none;
  outline: none;
  text-shadow:
    2px 2px 0 #3491ff,
    -2px 2px 0 #3491ff,
    2px -2px 0 #3491ff,
    -2px -2px 0 #3491ff,
    0 4px 14px #181818a0;
  transition: color 0.22s;
  cursor: pointer;
  line-height: 1.1;
  margin: 0;
  padding: 0;
}

.clock-link:hover:not(.clock-link-disabled) {
  color: #f7d774;
}

.clock-link.clock-link-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: auto;
}

.clock-info-link-row {
  margin-top: 36px;
  margin-left: 6px;
}

.clock-info-link {
  display: inline-block;
  font-family: 'CocoGothicPro', Arial, sans-serif;
  font-size: 1.5em;
  font-weight: normal;
  color: #fff;
  letter-spacing: 1.2px;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-shadow:
    2px 2px 0 #3491ff,
    -2px 2px 0 #3491ff,
    2px -2px 0 #3491ff,
    -2px -2px 0 #3491ff,
    0 4px 12px #181818a0;
  transition: color 0.2s;
}

.clock-info-link:hover {
  color: #f7d774;
}

.unavailable-dialogue {
  position: fixed;
  left: 0; top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(30,30,30,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.unavailable-dialogue span {
  font-family: 'CocoGothicPro', Arial, sans-serif;
  font-size: 1.5em;
  color: #fff;
  background: #232323;
  border-radius: 12px 12px 0 0;
  padding: 32px 44px 18px 44px;
  text-align: center;
  text-shadow: 1px 2px 10px #000c;
}

.close-dialogue {
  display: block;
  margin: 0 auto 24px auto;
  padding: 12px 32px;
  font-family: 'CocoGothicPro', Arial, sans-serif;
  font-size: 1.2em;
  background: #3491ff;
  color: #fff;
  border: none;
  border-radius: 0 0 12px 12px;
  cursor: pointer;
  font-weight: normal;
  box-shadow: 0 2px 8px #0009;
  transition: background 0.18s;
}
.close-dialogue:hover {
  background: #1c5db0;
}

@media (max-width: 900px) {
  .clock-main {
    padding: 28px 2vw 0 2vw;
  }
  .clock-title {
    font-size: 1.4em;
  }
  .clock-link,
  .clock-link.clock-link-disabled {
    font-size: 1.2em;
  }
  .clock-icon {
    width: 28px;
    height: 28px;
  }
  .clock-info-link {
    font-size: 1em;
  }
  .unavailable-dialogue span {
    font-size: 1.05em;
    padding: 20px 8vw 10px 8vw;
  }
  .close-dialogue {
    padding: 8px 22px;
    font-size: 1em;
  }
}