section {
    padding: 0.5em;
    min-width: 115px;
    width: 400px;
    max-width: 800px;
    border-right: 2px dotted gray;
    float: left;
  }
  
  #clock {
    width: 30em;
    height: 30em;
    border-radius: 50%;
    border: solid 2px black;
    margin: auto;
    position: relative;
  }
  
  #clock div, .faceBox {
    border: 0;
    background-color: black;
    position: absolute;
    transform-origin: center bottom;
    -webkit-transform-origin: center bottom;
    -moz-transform-origin: center bottom;
    -o-transform-origin: center bottom;
    transform: rotate(0deg);
  }
  
  #clock #hour {
    border-radius: 0.75em 0.75em 0 0;
    width: 1.5em;
    height: 6em;
    top: 9em;
    left: 14.25em;
    z-index: 30;
  }
  
  #clock #minute {
    border-radius: 0.5em;
    width: 1em;
    height: 11em;
    top: 4em;
    left: 14.5em;
    z-index: 20;
  }
  
  #clock #second {
    border-radius: 0.25em;
    width: 0.25em;
    height: 14em;
    top: 1em;
    left: 14.75em;
    z-index: 10;
    background-color: red;
  }
  
  #clock #center {
    height:2em;
    width: 2em;
    border-radius:50%;
    top:14em;
    left:14em;
    z-index:50;
    transform:rotate(0deg);
  }
  
  .smallTick {
    width: 0.1em;
    height: 0.5em;
    background-color: black;
  }
  
  .mediumTick {
    width: 0.25em;
    height: 0.8em;
    background-color: black;
  }
  
  .largeTick {
    width: 0.4em;
    height: 0.8em;
    background-color: black;
    position: relative;
  }
  
  .tickNum {
    font-family: Arial, sans-serif;
    font-size: 2em;
    line-height: 0;
    color: black;
    position: relative;
    top: 1em;
    left: -0.2em;
    z-index: 1;
  }
  
  .faceBox {
    border: 0;
    width: 0;
    height: 15em;
    top:0;
    left: 15em;
    position: absolute;
    text-align: center;
    overflow: visible;
    margin: 0 auto;
  }
  
  ._drag {
    font-family: arial, sans-serif;
  }
  
  /* @media (max-width: 550px) {
    ._drag {
      display: none;
    }
  } */



