.circle {
    /* 2πr where r is the radius (40) */
    /* stroke-dasharray: 251.2; */
    stroke-dasharray: 515;
    stroke-dashoffset: 0;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
    /* Start the animation from the top (0 degrees) */
}

.animate {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.9s linear;
    /* Set the drawing animation duration to 1s */
}

.reset {
    stroke: white;
    /* Resetting color to white */
    stroke-dashoffset: 515;
}

text {
    font-size: 48px;
    text-anchor: middle;
    /* dominant-baseline: middle; */
}

.svg-container {
    width: 50%;
    /* 親要素の幅の50% */
    height: auto;
    /* 自動調整 */
}

.svg-content {
    width: 100%;
    height: 100%;
}

#controls {
    margin-top: 20px;
}