body {
height: 100vh;
margin:0;
padding:0;
}
.time {
}
.main {
    display: flex;
    justify-content: center;
    align-items: middle;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}

.clockbox,
#clock {
    width: 100%;
}

/* Clock styles */
.circle {
    fill: none;
    stroke: white;
    stroke-width: 9;
    stroke-miterlimit: 10;
}

.mid-circle {
    fill: white;
}
.hour-marks {
    fill: none;
    stroke: white;
    stroke-width: 10;
    stroke-miterlimit: 10;
}

.hour-arm {
    fill: none;
    stroke: white;
    stroke-width: 15;
    stroke-miterlimit: 10;
}

.minute-arm {
    fill: none;
    stroke: white;
    stroke-width: 9;
    stroke-miterlimit: 10;
}

.second-arm {
    fill: none;
    stroke: darkgoldenrod;
    stroke-width: 3;
    stroke-miterlimit: 10;
}

/* Transparent box ensuring arms center properly. */
.sizing-box {
    fill: none;
}
/* responisive*/

@media only screen and (max-width: 800px) {

.time {display: none}
}


/* Make all arms rotate around the same center point. */
/* Optional: Use transition for animation. */
#hour, #minute, #second {
    transform-origin: 300px 300px;
    transition: transform .5s ease-in-out;
}
#hour2, #minute2, #second2 {
    transform-origin: 300px 300px;
    transition: transform .5s ease-in-out;
}
#hour3, #minute3, #second3 {
    transform-origin: 300px 300px;
    transition: transform .5s ease-in-out;
}
#hour4, #minute4, #second4 {
    transform-origin: 300px 300px;
    transition: transform .5s ease-in-out;
}