body {
    margin: 0;
    overflow: hidden;
    background-color: transparent;
}

#timer-display {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10vw;
    color: white;
    text-shadow: 0 0 10px black;
    font-family: sans-serif;
    z-index: 1;
}

#pause-icon {
    --pause-width: 8vw;
    --pause-height: 12vw;
    --pause-color: rgba(255, 255, 255, 0.7);

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--pause-width);
    height: var(--pause-height);
    opacity: 0; /* Hidden by default */
    transition: opacity 0.2s ease-in-out;
    pointer-events: none; /* Don't block clicks */
}

#pause-icon::before,
#pause-icon::after {
    content: '';
    position: absolute;
    top: 0;
    width: 35%;
    height: 100%;
    background-color: var(--pause-color);
    border-radius: 5px;
}

#pause-icon::before {
    left: 0;
}

#pause-icon::after {
    right: 0;
}

#progress-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.progress-path {
    fill: none;
    stroke: var(--bar-color, #00ff00);
    stroke-width: 20px;
    transition: stroke-dashoffset 0.1s linear, stroke 0.1s linear, opacity 0.2s ease-in-out;
}

.ot-path {
    opacity: 0;
    pointer-events: none;
}