#quote-text {
    font-size: 1em;
    font-style: italic;
}

#quote-author {
    font-weight: bold;
    font-size: 0.8em;
}

#quote-navigation {
    float: right;
    text-align: right;
    font-size: min(0.8em, 20px);
}

#quote-navigation button {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
}

#quote-navigation button:hover {
    opacity: 0.6;
}

#toggle-auto-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7em;
    height: 1.7em;
}

#quote-progress-container {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#quote-progress-circle {
    width: 98%;
    height: 98%;
    transform: rotate(-90deg);
}

#quote-progress-circle-progress {
    fill: none;
    stroke: #0000FF;
    stroke-width: 0.11em;
    stroke-linecap: round;
    stroke-dasharray: 75.4;
    stroke-dashoffset: 75.4;
}

#quote-progress-circle-progress.animating {
    animation: progress-circle 20s linear forwards;
}

@keyframes progress-circle {
    to {
        stroke-dashoffset: 0;
    }
}

#quote-zone {
    transition: color 1s;
    width: 100%;
    max-width:800px;
    min-height: 90px;
    border-radius: 10px;
    padding: 20px;
    color: #0000FF;
}