/* Root Variables */
:root {
  --color-bg: #ffebcd;
  --color-text: #0000ff;
  --color-accent: #f55858;
  --color-link-active: #ce1111;
  --color-white: #ffffff;
  --shadow-accent: rgba(241, 102, 102, 0.2);
  --shadow-blue: rgba(0, 0, 255, 0.2);
  --font-size-base: 18px;
  --font-size-mobile: 16px;
  --clock-height-desktop: 320px;
  --clock-height-tablet: 270px;
  --clock-height-mobile: 230px;
}

/* Font Faces */
@font-face {
  font-family: 'UM Typewriter';
  src: url(../fonts/UMTypewriter-Regular.woff2) format('woff2');
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: 'UM Typewriter';
  src: url(../fonts/UMTypewriter-Italic.woff2) format('woff2');
  font-style: italic;
  font-weight: normal;
}

/* Base Styles */
* {
  margin: 0;
  padding: 0; 
  box-sizing: border-box;
}
body {
  display: flex;
  justify-content: center;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: 'UM Typewriter', 'Courier New', Courier, monospace;
  font-size: var(--font-size-base);
}

/* Flex Utilities */
.flex-row { display: flex; flex-direction: row; }
.flex-column { display: flex; flex-direction: column; }
.grow-1 { flex-grow: 1; }
.gap-md { gap: 1rem; }
.gap-sm { gap: 0.5rem; }

/* Alignment */
.justify-center { justify-content: center; }
.justify-space { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }

/* Container */
.container {
  padding: 0.5rem;
  max-width: 520px;
}

/* Clocks */
.clocks {
  height: var(--clock-height-desktop);
  background-color: var(--color-white);
  box-shadow: 4px 4px 0px 0px var(--shadow-accent);
}

/* Text */
p {
  line-height: 1.1em;
}

a {
  color: var(--color-text);
  text-decoration: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

a:active {
  color: var(--color-link-active);
}

@media (hover: hover) and (pointer: fine) {
  a:hover {
    color: var(--color-link-active);
  }
}

.title {
  height: 1.5em;
  color: var(--color-white);
  background-color: var(--color-accent);
}

#help {
  cursor: pointer;
}

.toshow {
  display: none;
}

/* Clock Face */
.clock {
  display: flex;
  position: relative;
  justify-content: center;
  width: 10em;
  height: 10em;
  border: 6px solid var(--color-text);
  border-radius: 50%;
  box-shadow: 4px 4px 0px 0px var(--shadow-blue);
  font-family: Helvetica, Arial, sans-serif;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Clock Hands */
.hour-hand,
.minute-hand,
.second-hand {
  position: absolute;
  bottom: 50%;
  transform-origin: bottom center;
}

.hour-hand {
  height: 3em;
  width: 6px;
  border-radius: 3px;
  background-color: var(--color-text);
  z-index: 3;
}

.minute-hand {
  height: 3.5em;
  width: 4px;
  border-radius: 2px;
  background-color: var(--color-text);
  z-index: 2;
}

.second-hand {
  height: 4em;
  width: 4px;
  border-radius: 2px;
  background-color: var(--color-accent);
  z-index: 1;
}

.circle {
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: var(--color-text);
  border-radius: 50%;
  bottom: calc(50% - 6px);
  z-index: 4;
}

/* Clock Digits */
.digit span {
  position: absolute;
  font-size: 1rem;
  width: 1rem;
  height: 1rem;
  text-align: center;
  line-height: 1rem;
}

.digit .s1  { top: 10%; right: 25%; }
.digit .s2  { top: 25%; right: 10%; }
.digit .s3  { top: calc(50% - 0.5rem); right: 5%; }
.digit .s4  { bottom: 25%; right: 10%; }
.digit .s5  { bottom: 10%; right: 25%; }
.digit .s6  { bottom: 5%; left: calc(50% - 0.5rem); }
.digit .s7  { bottom: 10%; left: 25%; }
.digit .s8  { bottom: 25%; left: 10%; }
.digit .s9  { top: calc(50% - 0.5rem); left: 5%; }
.digit .s10 { top: 25%; left: 10%; }
.digit .s11 { top: 10%; left: 25%; }
.digit .s12 { top: 5%; left: calc(50% - 0.5rem); }

/* Selection */
::selection {
  color: var(--color-white);
  background: var(--color-accent);
}

/* Responsive */
@media only screen and (max-width: 767px) {
  .clocks {
    height: var(--clock-height-tablet);
  }
}
@media only screen and (max-width: 480px) {
  body {
    font-size: var(--font-size-mobile);
  }
  .clocks {
    height: var(--clock-height-mobile);
  }
}