@import url("https://fonts.googleapis.com/css?family=Roboto");

html {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;
}

svg {
  display: none;
  zoom:1;
}

body {
  background-color: #303030;
  margin: 0;
}

.hour_marker {
  fill: transparent;
  stroke: yellow;
  stroke-width: 7;
  stroke-dasharray: 0.2, 4.8;
  stroke-dashoffset: 0.1;
}

.minute_marker {
  fill: transparent;
  stroke: #0f0e0e;
  stroke-width: 7;
  stroke-dasharray: 0.2, 0.8;
  stroke-dashoffset: 0.1;
}

.hand {
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
}

.hand--thick {
  stroke-width: 7;
}

.hand--second {
  stroke: yellow;
}

.center {
  fill: #0f0e0e;
  stroke-width: 2;
  stroke: yellow;
}

.text {
  fill: yellow;
  font-family: "Roboto", sans-serif;
  text-anchor: middle;
  cursor: pointer;
  user-select: none;
}


@media only screen and (min-width: 600px) {

svg {
    zoom: 2;
    border: 1px solid #fff;
    border-radius: 50%;
    background: linear-gradient(
0deg,#2a2a2a 0%, #383838 80%);
    box-shadow: 0px 10px 20px 0px rgb(0 0 0 / 25%);
    -webkit-box-shadow: 0px 10px 20px 0px rgb(0 0 0 / 25%);
    -moz-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.25);
}
}