.circle-timer {
    position: relative;
    width: 120px;
    height: 120px;
}

svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

::selection {
    background: #F39200;
    color: white;
}

.circle-bg {
    fill: none;
    stroke: #CACACA;
    stroke-width: 1;
}

.circle {
    fill: none;
    stroke-width: 7;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s linear;
}

.hours {
    stroke: #F39200;
}

.minutes {
    stroke: #fdc36c;
}

.seconds {
    stroke: #F39200;
}

.time-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    font-weight: bold;
}

.label {
    position: absolute;
    bottom: -30px;
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #aaa;
}