@import url('https://fonts.googleapis.com/css2?family=Darker+Grotesque:wght@300..900&display=swap');

:root {
    --bg-color: #080808FF;
    --progress-bar-color: #32edf2;
    --bar-bg-color: #e1e1e11a;
    --text-color: #b5b5b5;
    --widget-font-size: 5rem;
    --widget-font-spacing: .5em;
    --widget-font-v-spacing: 0em;
    --bar-size: calc(var(--widget-font-size) * 2);
    --radius-calculator: 1;
    --border-radius: calc(var(--widget-font-size) / 16 * var(--radius-calculator));
}

.previewWidget {
    background-image: url("/assets/bokeh.jpg");
    padding: 10px;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: .25em;
    overflow: hidden;
}

.timer-container {
    display: flex;
    flex-direction: column;
    text-align: center;
    font-family: "Darker Grotesque", sans-serif;
    font-feature-settings: "tnum";
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow: hidden;
    padding: 20px;
}

.timer-text {
    color: var(--text-color);
    font-size: calc(var(--widget-font-size) / 2);
    font-weight: 800;
}

.text-gradient {
    color: var(--bar-bg-color);
}

.timer {
    font-size: var(--bar-size);
    width: 3em;
    height: .25em;
    background-color: var(--bar-bg-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    position: relative;
    margin: 2rem auto;
    padding: .025em;
}

.timer-inner {
    width: 100%;
    height: 100%;
}

.progress-bar {
    height: 100%;
    background-color: var(--progress-bar-color);
    width: 75%;
    transition: width 0.1s linear;
    border-radius: calc(var(--border-radius) * .75);
}

.time-display {
    color: var(--text-color);
    font-size: var(--widget-font-size);
    font-weight: 700;
    display: flex;
    gap: 5px;
    margin: 0 auto;
    margin-top: var(--widget-font-v-spacing);
}

.digit {
    display: inline-block;
    width: var(--widget-font-spacing);
    text-align: center;
    font-feature-settings: "tnum";
  }

.timer-text {
    order: 1;
}

.time-display {
    order: 2;
}

.timer {
    order: 3;
}