@import "interactive.css";

.control-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.display-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 1rem;
    margin-top: 0.5rem;
    color: var(--text);
}

.time-container, .countdown-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.time-container > span, .countdown-container > span {
    font-weight: 600;
    width: 130px;
}

time {
    border-bottom: 1px dotted var(--muted);
    padding-bottom: 2px;
    cursor: help;
}

.countdown-val {
    font-family: monospace;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--accent);
}