/*
 * Base styles below were vendored from:
 * https://jakeisnt.github.io/styles/main.css
 *
 * They are inlined here because that repo is outdated and this site should
 * not depend on a remote stylesheet at runtime.
 */
html {
  font-size: 20px;
  font-family: "Arial", "Helvetica", sans-serif;
}

a:link {
  color: #484848;
}

a:visited {
  color: #585858;
}

a:hover {
  color: black;
}

a:active {
  color: blue;
}

a[href^="./"] {
  color: #505050;
}

::selection {
  background-color: #99ccff;
}

footer {
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
}

img {
  vertical-align: middle;
}

#br {
  display: block;
  margin: 0 0;
}

h1 {
  display: block;
  font-size: 1.17em;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

h2 {
  display: block;
  font-size: 1em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

* {
  white-space: pre-wrap;
}

body {
  margin: 0;
  height: 100vh;
  display: flex;
  font-family: Arial;
  align-items: center;
  justify-content: center;
}

.num_clock {
  font-size: 100px;
  width: 50%;
  text-align: center;
}

.tradclock, .neraliesection, .agesection, .calsection {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/*  Clock styles */
.hour-arm, .minute-arm, .second-arm, .mid-circle {
  fill: #fff;
  stroke: #fff;
}

.mid-circle {
  stroke-width: 10;
  stroke-miterlimit: 10;
}

.hour-arm {
    stroke-width: 10;
    stroke-miterlimit: 10;
}

.minute-arm {
    stroke-width: 10;
    stroke-miterlimit: 10;
}

.second-arm {
    stroke-width: 10;
    stroke-miterlimit: 10;
}

/* Transparent box ensuring arms center properly. */
.sizing-box {
    fill: none;
}

/* Make all arms rotate around the same center point. */
/* Optional: Use transition for animation. */
#hour,
#minute,
#second {
    transform-origin: 300px 300px;
    transition: transform .5s ease-in-out;
}