.global-container {
  margin: auto;
  width: 300px;
  height: 300px; }
  .global-container #clock-container {
    height: 100%;
    width: 100%;
    position: relative;
    background: var(--blue);
    border: 10px solid #f2f2f2;
    border-radius: 50%;
    overflow: hidden; }
    .global-container #clock-container:before {
      display: block;
      content: "";
      width: 5px;
      height: 5px;
      background: #fff;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); }
    .global-container #clock-container #hours,
    .global-container #clock-container #minutes,
    .global-container #clock-container #seconds {
      display: block;
      position: absolute;
      transform-origin: 50% 100%;
      border-radius: 3px; }
    .global-container #clock-container #hours {
      width: 2.5%;
      height: 20%;
      left: 48.75%;
      top: 30%;
      background: var(--yellow);
      animation: rotate 43200s infinite linear;
      animation-delay: var(--hoursDelay);
      z-index: 1; }
    .global-container #clock-container #minutes {
      width: 2%;
      height: 40%;
      left: 49%;
      top: 10%;
      background: var(--yellow);
      animation: rotate 3600s infinite linear;
      animation-delay: var(--minutesDelay);
      z-index: 2; }
    .global-container #clock-container #seconds {
      width: 1%;
      height: 45%;
      left: 49.5%;
      top: 14%;
      background: white;
      transform-origin: 50% 80%;
      animation: rotate 60s infinite linear;
      animation-delay: var(--secondsDelay);
      z-index: 3; }
  .global-container.gazelle {
    display: block;
    width: 1024px;
    height: 576px;
    background: url("https://studiorheden.nl/srnew19/wp-content/uploads/2020/12/10.jpg") no-repeat; }
    .global-container.gazelle #clock-container {
      position: relative;
      width: 22px;
      height: 22px;
      background: #000;
      border: 2px solid grey;
      border-radius: 50%;
      overflow: hidden;
      top: 252px;
      left: 510px; }

@keyframes rotate {
  100% {
    transform: rotateZ(360deg); } }

.line {
  width: 4px;
  height: 10px;
  background-color: white;
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 0 140px;
  color: white;
  font-family: 'ProximaNova', monospace;
  border-radius: 3px; }

.line:nth-child(1) {
  transform: translateY(-140px); }

.line:nth-child(2) {
  transform: translateY(-140px) rotateZ(calc(360deg / 12)); }

.line:nth-child(3) {
  transform: translateY(-140px) rotateZ(calc(2 * 360deg / 12)); }

.line:nth-child(4) {
  transform: translateY(-140px) rotateZ(calc(3 * 360deg / 12)); }

.line:nth-child(5) {
  transform: translateY(-140px) rotateZ(calc(4 * 360deg / 12)); }

.line:nth-child(6) {
  transform: translateY(-140px) rotateZ(calc(5 * 360deg / 12)); }

.line:nth-child(7) {
  transform: translateY(-140px) rotateZ(calc(6 * 360deg / 12)); }

.line:nth-child(8) {
  transform: translateY(-140px) rotateZ(calc(7 * 360deg / 12)); }

.line:nth-child(9) {
  transform: translateY(-140px) rotateZ(calc(8 * 360deg / 12)); }

.line:nth-child(10) {
  transform: translateY(-140px) rotateZ(calc(9 * 360deg / 12)); }

.line:nth-child(11) {
  transform: translateY(-140px) rotateZ(calc(10 * 360deg / 12)); }

.line:nth-child(12) {
  transform: translateY(-140px) rotateZ(calc(11 * 360deg / 12)); }

.line::after {
  font-size: 22px;
  display: inline-block;
  margin: 10px 0 0 -5px; }

/* .line is already rotated, rotate reverse */
.line:nth-child(1)::after {
  content: "12";
  transform: translateX(-4px); }

.line:nth-child(2)::after {
  content: "1";
  transform: rotateZ(calc(-360deg / 12)); }

.line:nth-child(3)::after {
  content: "2";
  transform: rotateZ(calc(-2 * 360deg / 12)); }

.line:nth-child(4)::after {
  content: "3";
  transform: rotateZ(calc(-3 * 360deg / 12)); }

.line:nth-child(5)::after {
  content: "4";
  transform: rotateZ(calc(-4 * 360deg / 12)); }

.line:nth-child(6)::after {
  content: "5";
  transform: rotateZ(calc(-5 * 360deg / 12)); }

.line:nth-child(7)::after {
  content: "6";
  transform: rotateZ(calc(-6 * 360deg / 12)); }

.line:nth-child(8)::after {
  content: "7";
  transform: rotateZ(calc(-7 * 360deg / 12)); }

.line:nth-child(9)::after {
  content: "8";
  transform: rotateZ(calc(-8 * 360deg / 12)); }

.line:nth-child(10)::after {
  content: "9";
  transform: rotateZ(calc(-9 * 360deg / 12)); }

.line:nth-child(11)::after {
  content: "10";
  transform: rotateZ(calc(-10 * 360deg / 12)); }

.line:nth-child(12)::after {
  content: "11";
  transform: rotateZ(calc(-11 * 360deg / 12)); }

@font-face {
  font-family: 'ProximaNova';
  font-weight: 400;
  font-display: swap;
  src: url("https://www.gazelle.nl/static/version1622723556/frontend/Gazelle/gazelle/nl_NL/fonts/proximanova/regular/ProximaNova-Reg-webfont.eot");
  src: url("https://www.gazelle.nl/static/version1622723556/frontend/Gazelle/gazelle/nl_NL/fonts/proximanova/regular/ProximaNova-Reg-webfont.eot?iefix") format("eot"), url("/assets/ProximaNova-Reg-webfont.woff") format("woff"), url("https://www.gazelle.nl/static/version1622723556/frontend/Gazelle/gazelle/nl_NL/fonts/proximanova/regular/ProximaNova-Reg-webfont.ttf") format("truetype"), url("https://www.gazelle.nl/static/version1622723556/frontend/Gazelle/gazelle/nl_NL/fonts/proximanova/regular/ProximaNova-Reg-webfont.svg#ProximaNova-Reg-webfont") format("svg"); }

* {
  box-sizing: border-box; }

:root {
  --blue: #004a99;
  --yellow: rgb(255, 237, 0);
  --secondsDelay: 0s;
  --minutesDelay: 0s;
  --hoursDelay: 0s; }

body {
  margin: 0;
  display: flex;
  background: url(https://www.regiobodeonline.nl/wp-content/uploads/2020/08/0181086_Tekening_Gazelle.jpg) no-repeat 100% 100%;
  background-size: cover;
  align-items: center;
  height: 100vh;
  font-family: sans-serif; }