* {
  margin: 0;
  padding: 0;
  list-style: none;
  vertical-align: baseline;
  box-sizing: border-box;
  }

  :root {
    --bg-color: #3d3d3d;
    --bar-width: 70px;
    --bar-height: 70px;
    --bar-length: 10px;
  }

  body {
    background-color: var(--bg-color);
  }

  .clock-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .number-container {
    position: relative;
    height: calc((var(--bar-height) * 2) + var(--bar-length) * 2);
    width: calc(var(--bar-width) + var(--bar-length) * 2);
    margin: 15px;
  }

  .vertical {
    position: absolute;
    height: calc(50% - var(--bar-length));
    width: var(--bar-length);
    box-shadow: inset 1px 1px 6px black,
                inset -1px -1px 2px rgba(255, 255, 255, .4);
  }

  .horizontal {
    position: absolute;
    height: var(--bar-length);
    width: 100%;
    box-shadow: inset 1px 1px 3px black,
                inset 0px 0px 3px rgba(255, 255, 255, .4);
  }

  .bottom {
    bottom: 0;
  }

  .middle {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - var(--bar-length));
  }

  .top-right {
    top: var(--bar-length);
    right: 0;
  }

  .bottom-right {
    bottom: var(--bar-length);
    right: 0;
  }

  .bottom-left {
    bottom: var(--bar-length);
    left: 0;
  }

  .top-left {
    top: var(--bar-length);
    left: 0;
  }

  .top-right::before, .bottom-right::before {
    content: '';
    position: absolute;
    height: var(--bar-length);
    width: var(--bar-length);
    background: linear-gradient(-45deg, transparent 50%, var(--bg-color) 50%);
  }

  .top-left::before, .bottom-left::before {
    content: '';
    position: absolute;
    height: var(--bar-length);
    width: var(--bar-length);
    background: linear-gradient(45deg, transparent 50%, var(--bg-color) 50%);
  }

  .top-right::after, .bottom-right::after {
    content: '';
    position: absolute;
    height: var(--bar-length);
    width: var(--bar-length);
    background: linear-gradient(45deg, var(--bg-color) 50%, transparent 50%);
    bottom: 0;
  }

  .top-left::after, .bottom-left::after {
    content: '';
    position: absolute;
    height: var(--bar-length);
    width: var(--bar-length);
    background: linear-gradient(-45deg, var(--bg-color) 50%, transparent 50%);
    bottom: 0;
  }

  .top::before {
    content: '';
    position: absolute;
    height: var(--bar-length);
    width: var(--bar-length);
    background: linear-gradient(45deg, var(--bg-color) 50%, transparent 50%);
  }

  .top::after {
    content: '';
    position: absolute;
    height: var(--bar-length);
    width: var(--bar-length);
    background: linear-gradient(-45deg, var(--bg-color) 50%, transparent 50%);
    right: 0;
  }

  .bottom::before {
    content: '';
    position: absolute;
    height: var(--bar-length);
    width: var(--bar-length);
    background: linear-gradient(-45deg, transparent 50%, var(--bg-color) 50%);
  }

  .bottom::after {
    content: '';
    position: absolute;
    height: var(--bar-length);
    width: var(--bar-length);
    background: linear-gradient(45deg, transparent 50%, var(--bg-color) 50%);
    right: 0;
  }

  .middle::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: calc(var(--bar-length) / 2) solid var(--bg-color);
    border-bottom: calc(var(--bar-length) / 2) solid var(--bg-color);
    border-right: calc(var(--bar-length) / 2) solid transparent;
  }

  .middle::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: calc(var(--bar-length) / 2) solid var(--bg-color);
    border-bottom: calc(var(--bar-length) / 2) solid var(--bg-color);
    border-left: calc(var(--bar-length) / 2) solid transparent;
    right: 0;
  }

  .pointers > div {
    height: var(--bar-length);
    width: var(--bar-length);
    margin: 50px auto;
    /* box-shadow: inset 1px 1px 6px black,
                inset -1px -1px 2px rgba(255, 255, 255, .4); */
  }

  .shine {
    background-color: #25CCF7;
    box-shadow: inset 0 0 25px #0984e3,
                inset 0 0 10px blue;
  }