.clock-container {
    height: 75px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: fixed;
    background-color: #f8f8f8;
    width: 100%;
    z-index: 1111;
}

.clock-container h2,
.clock-container h3,
.clock-container h4 {
    margin: 0.25rem 0 0 0;
}

#clock .box > span {
    display: block;
    font-weight: normal;
    font-size: 0.8rem;
}

#clock {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.box {
    --v:calc( ((18/5) * var(--p) - 90)*1deg);
    font-weight: bold;
    color: #fff;
    width:45px;
    height:45px;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius:50%;
    padding:3px;
    margin: 0.25rem 0.25rem 0.25rem 0;
    background:
        linear-gradient(#d83947,#d83947) content-box,
        linear-gradient(var(--v), #efefef     50%,transparent 0) 0/min(100%,(50 - var(--p))*100%),
        linear-gradient(var(--v), transparent 50%,#289b28        0) 0/min(100%,(var(--p) - 50)*100%),
        linear-gradient(to right, #efefef 50%,#289b28 0);
}