body {
  margin: 0;
} .mainImg {
  background-color: black;
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
} .mainImg svg {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}
#chrono_startstopButton{
  opacity: 0;
}
#chrono_resetButton{
  opacity: 0;
}
#hatter{
    position: absolute;
    left: 0px;
    top: 0px;
    -webkit-animation: myOrbit 120s linear infinite;
       -moz-animation: myOrbit 120s linear infinite;
         -o-animation: myOrbit 120s linear infinite;
            animation: myOrbit 120s linear infinite;    
}
@keyframes myOrbit {
    from { transform: rotate(0deg) translateX(200px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(200px) rotate(-360deg); }
}
#c_sech{
  transform-box: fill-box;
  transform-origin: center;
} #c_minh{
  transform-box: fill-box;
  transform-origin: center;
} #c_hrh{
  transform-box: fill-box;
  transform-origin: center;
} #secondhand{
  transform-box: fill-box;
  transform-origin: center;
} #minutehand{
  transform-box: fill-box;
  transform-origin: center;
} #hourhand{
  transform-box: fill-box;
  transform-origin: center;
}

@media (max-width: 768px) {
  .mainImg{
    background-color: black;
  }
  .mainImg svg{
    padding-top: 0px;
    padding-left: 0px;
    height: 120vh;
    width: 280%;
    transform: translateX(-32.5%);
  }
}