#clock-outside {
    position: relative;
    box-sizing: border-box;
    background: white url("tomato.jpg");
    min-height: 320px;
    max-height: 320px;
    min-width: 320px;
    max-width: 320px;
    z-index: 1;
}

.knob-wrapper {
    position: absolute;
    top: 40px;
    left: 40px;
    min-height: 240px;
    max-height: 240px;
    min-width: 240px;
    max-width: 240px;  
}

#clock-inside {
    display: flex;
    flex-flow: column nowrap;
    box-sizing: border-box;
    justify-content: center;
    align-items: space-between;
    background: transparent;
    color: white;
    position: absolute;
    top: 40px;
    left: 40px;
    min-height: 240px;
    max-height: 240px;
    min-width: 240px;
    max-width: 240px;
    border-radius: 50%;
    z-index: 2;
}

/* Using the data attributes for the animation selectors. */
/* Base settings for all animated elements */
div[data-anim~=base] {
  animation-iteration-count: 1;  /* Only run once */
  animation-fill-mode: forwards; /* Hold the last keyframe */
  animation-timing-function:linear; /* Linear animation */
}

.wrapper[data-anim~=wrapper] {
  animation-duration: 0.01s; /* Complete keyframes asap */
  animation-delay: 3s; /* Wait half of the animation */
  animation-name: close-wrapper; /* Keyframes name */
}

.circle[data-anim~=left] {
  animation-duration: 6s; /* Full animation time */
  animation-name: left-spin;
}

.circle[data-anim~=right] {
  animation-duration: 3s; /* Half animation time */
  animation-name: right-spin;
}

/* Rotate the right side of the progress bar from 0 to 180 degrees */
@keyframes right-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* Rotate the left side of the progress bar from 0 to 360 degrees */
@keyframes left-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* Set the wrapper clip to auto, effectively removing the clip */
@keyframes close-wrapper {
  to {
    clip: rect(auto, auto, auto, auto);
  }
}

#elapsed {
    min-height: 100%;
    max-height: 100%;
    vertical-align: bottom;
}

#colophon {
    padding-top: 1em;
}

#colophon a, #colophon a:visited {
    color: black;
    text-decoration: none;
}

#colophon a:hover, #colophon a:focus {
    color: purple;
    text-decoration: underline;
}

.alert {
    color: red;
    text-align: center;
}