@font-face {
  font-family: 'Kalisto';
  src: url('fonts/Kallisto Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'Kalisto';
  src: url('fonts/Kallisto Thin Italic.woff') format('woff');
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: 'Kalisto';
  src: url('fonts/Kallisto Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Kalisto';
  src: url('fonts/Kallisto Light Italic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'Kalisto';
  src: url('fonts/Kallisto Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Kalisto';
  src: url('fonts/Kallisto Medium Italic.woff') format('woff');
  font-weight: 500;
  font-style: italic;
}

:root{
    --ff-accent:#44d062;
    --ff-bg:transparent;
    --ff-text:#fff;
    --ff-gap:.5rem;
}

.ff-countdown{
    display:grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: max-content !important;
    gap: var(--ff-gap, .5rem);
    align-items: center;
    justify-content: center;
    width: 100%;
    color: var(--ff-text);
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

.ff-countdown .ff-item{
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    white-space: normal;
}

.ff-countdown .ff-box{
    display:flex;
    align-items:center;
    justify-content:center;
    padding: clamp(6px, 1.2vw, 16px) clamp(10px, 1.6vw, 20px);
    border: 5px solid var(--ff-accent);
    border-radius: 12px;
    background: var(--ff-bg);
    box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
    width: auto !important;
    max-width: none !important;
}

.ff-countdown .ff-value{
    font-family: 'Kalisto', sans-serif;
    font-weight: 500;
    font-style: italic;
    letter-spacing:.2px;
    line-height:1;
    font-size: clamp(18px, 3.8vw, 48px);
}
.ff-countdown .ff-label{
    font-family: 'Kalisto', sans-serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(9px, 1.6vw, 18px);
    opacity:.95;
}

.ff-countdown.ff-font-inherit .ff-value,
.ff-countdown.ff-font-inherit .ff-label{
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
}

.ff-countdown.ff-size-sm .ff-value{ font-size: clamp(16px, 3.2vw, 36px); }
.ff-countdown.ff-size-sm .ff-label{ font-size: clamp(8px, 1.2vw, 14px); }
.ff-countdown.ff-size-md .ff-value{ font-size: clamp(17px, 3.5vw, 42px); }
.ff-countdown.ff-size-md .ff-label{ font-size: clamp(8.5px, 1.4vw, 16px); }
.ff-countdown.ff-size-xl .ff-value{ font-size: clamp(20px, 4.8vw, 64px); }
.ff-countdown.ff-size-xl .ff-label{ font-size: clamp(10px, 2vw, 22px); }

.ff-countdown *{ box-sizing: border-box; }