*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #2f363e;
}
#time{
    display: flex;
    gap: 40px;
    color: rgb(255, 255, 255);
}
#time .circle{
    position: relative;
    width: 150px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#time .circle svg{
    position: relative;
    width: 150px;
    height: 150px;
    transform: rotate(270deg);
}
#time .circle svg circle{
   width: 100%;
   height: 100%;
   fill: transparent;
   stroke-width: 4;
   stroke:#191919;
   transform:translate(5px,5px); 
}
#time .circle svg circle:nth-child(2){
    stroke: var(--rang);
    stroke-dasharray: 440;
}
#time div{
    position:absolute;
    align-items:center;
    font-weight: 500;
    font-size: 1.5em;
}
#time .ap{
    position: relative;
    font: 1em;
    transform: translateX(-20px);
}