:root {
    --color-progress: #4285f4;
    --color-tracking: #80808030;
}

.progress-circle {
    display: block;
    position: relative;
    width: fit-content;
}

.image {
    height: 100%;
    width: 100%;
    aspect-ratio: 1 / 1;
}

.ring {
    /* don't have a filled-in circle, but make a circle with a border instead */
    fill: transparent;
    stroke-width: 3;
    /* make it so that the progress starts from the top */
    transform-origin: center;
    rotate: -90deg;
}

.ring.track {
    /* the track the progress moves along should be grey by default*/
    stroke: var(--color-tracking);
}

.ring.progress {
    /* the progress bar itself should be red by default*/
    /* any changes should be transitioned! */
    stroke: url(#gradient1);
    transition: stroke-dashoffset 1s linear;
}

.label {
    /* style the little counter in the middle */
    font-family: sans-serif;
    font-size: 1.5em;
    /* stick it in the middle out-of-flow */
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
}

.label {
    line-height: .8;
    text-align: center;

    span.description {
        font-size: .8rem;
        display: block;
        line-height: 1;
    }

    span.percent {
        font-weight: bold;
        display: block;
        margin-bottom: .5rem;
    }
}