html {
   height: 100%;
}
body {
  padding: 0;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;

}
#clock {
  width: 750px;
  height: 1294px;
  background: transparent url('./images/Mecox-cut.jpg') 0 0 no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -647px 0 0 -375px;
}
.mechanics {
  -webkit-filter: drop-shadow(7px 7px 7px rgba(0, 0, 0, 0.5));
}
#sec,
#min,
#hour,
#button {
  position: absolute;
}

#min {
  background: url('./images/Wind-arrow.png') 0 0 no-repeat;
  width: 300px;
  height: 300px;
  left: 225px;
  top: 497px;
  -webkit-transform-origin: 150px 150px;
  -moz-transform-origin: 150px 150px;
  -ms-transform-origin: 150px 150px;
  -o-transform-origin: 150px 150px;
  transform-origin: 150px 150px;
}


.top-left {
    position: absolute;
    top: 60px;
    left: 16px;
    z-index: 10;
    font-size: 200%;
    font-family: Arial, Helvetica, sans-serif;
}
.top-right {
    position: absolute;
    top: 60px;
    right: 16px;
    z-index: 10;
    font-size: 200%;
    font-family: Arial, Helvetica, sans-serif;
}
.botRight {
    width: 300px;
    height: 200px;
    position: absolute;
    left: 450px;
    top: 1084px;
    z-index: 11;
      }
.botLeft {
    width: 300px;
    height: 200px;
    position: absolute;
    left: 0px;
    top: 1084px;
    z-index: 11;
      }
      
      .topRight {
    width: 300px;
    height: 200px;
    position: absolute;
    left: 450px;
    top: 860px;
    z-index: 11;
      }
      
         .topLeft {
    width: 300px;
    height: 200px;
    position: absolute;
    left: 0px;
    top: 860px;
    z-index: 11;
      }
      #tides {
      position: absolute;
      left: 136px;
      top: 880px;
   
      }  
      #bCT {
      position: absolute;
      left: 136px;
      top: 860px;
      font-size: 20px;
      }
     #eCT {
      position: absolute;
      left: 550px;
      top: 860px;
      font-size: 20px;

      }
      
      .chart {
      fill:none;
      stroke-width:1;
      stroke:black;
      }
      .grid{
      stroke:white;   
      }  
      .minHand{
      stroke:red;
      }
      .sun{
      stroke:yellow;
      fill: yellow;
      }
      
       .moon{
      stroke:white;
      fill: white;
      }
      .text{
      font-size="20";
      font-family="sans-serif";
      }
      
      .top-middle {
    position: absolute;
    text-align: center;
    letter-spacing: 2px;
    font-weight: bold;
    width:750px;
    top: 20px;
    z-index: 10;
    font-size: 250%;
    font-family: Arial, Helvetica, sans-serif;
}