/* Layout */
.main {
    display: block; /* flex*/
    padding: 2em;
    height: 90vh;
    justify-content: center;
    align-items: middle;
/*    background-color: peachpuff;*/
    background: #FFAFBD;  /* fallback for old browsers */
background: -webkit-linear-gradient(to top, #ffc3a0, #FFAFBD);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #ffc3a0, #FFAFBD); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

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

/* Clock styles */
.circle {
    fill: none;
    stroke: #fff;
    stroke-width: 12;
    stroke-miterlimit: 10;
}

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

.hour-arm {
    fill: none;
    stroke: #fff;
    stroke-width: 17;
    stroke-miterlimit: 10;
}

.minute-arm {
    fill: none;
    stroke: #fff;
    stroke-width: 11;
    stroke-miterlimit: 10;
}

.second-arm {
    fill: none;
    stroke: #fff;
    stroke-width: 4;
    stroke-miterlimit: 10;
}

/* Transparent box ensuring arms center properly. */
.sizing-box {
    fill: 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;
}

#second {
    transform-origin: 300px 300px;    
    transition: transform .35s ease-in-out;
    
}

/* text */
.text {
    display:block;
}
h1 {
    text-align: center;
    text-transform: uppercase;
    font-family: 'Overpass Mono', monospace;
    font-size: 1rem;
    color: white;
}