/* 
 
this is the original

:root {
    --fcc-flip-duration: 0.7s;
    --fcc-spacing: 8px;
    --fcc-digit-block-radius: 4px;
    --fcc-digit-block-spacing: 4px;
    --fcc-digit-block-width: 26px;
    --fcc-digit-block-height: 40px;
    --fcc-digit-font-size: 28px;
    --fcc-label-font-size: 10px;
    --fcc-label-color: inherit;
    --fcc-background: #0f181a;
    --fcc-digit-color: #fff;
    --fcc-divider-color: hsla(0, 0%, 100%, 0.4);
    --fcc-divider-height: 1px;
    --fcc-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
    --fcc-separator-size: 5px;
    --fcc-separator-color: currentColor;
  } */
  
  :root {
    --fcc-flip-duration: 0.7s;
    --fcc-spacing: 5px;
    --fcc-digit-block-radius: 3px;
    --fcc-digit-block-spacing: 3px;
    --fcc-digit-block-width: 18.2px;
    --fcc-digit-block-height: 28px;
    --fcc-digit-font-size: 19.6px;
    --fcc-label-font-size: 10px;
    --fcc-label-color: inherit;
    --fcc-background: #0f181a;
    --fcc-digit-color: #fff;
    --fcc-divider-color: hsla(0, 0%, 100%, 0.4);
    --fcc-divider-height: 1px;
    --fcc-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
    --fcc-separator-size: 3px;
    --fcc-separator-color: currentColor;
  }
  
  /* screens more than 300px, but less than 600px */ 
  @media (min-width: 300px) and (max-width: 600px) {
    :root {
      /* --fcc-flip-duration: 0.7s;
      --fcc-spacing: 8px;
      --fcc-digit-block-width: 20px;
      --fcc-digit-block-height: 20px;
      --fcc-digit-block-radius: 4px;
      --fcc-digit-block-spacing: 4px;
      --fcc-digit-font-size: 24px;
      --fcc-label-font-size: 8px;
      --fcc-label-color: inherit;
      --fcc-background: #0f181a;
      --fcc-digit-color: #fff;
      --fcc-divider-color: hsla(0, 0%, 100%, 0.4);
      --fcc-divider-height: 1px;
      --fcc-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
      --fcc-separator-size: 4px;
      --fcc-separator-color: currentColor; */
      --fcc-flip-duration: 0.7s;
      --fcc-spacing: 5px;
      --fcc-digit-block-radius: 3px;
      --fcc-digit-block-spacing: 3px;
      --fcc-digit-block-width: 18.2px;
      --fcc-digit-block-height: 28px;
      --fcc-digit-font-size: 19.6px;
      --fcc-label-font-size: 10px;
      --fcc-label-color: inherit;
      --fcc-background: #0f181a;
      --fcc-digit-color: #fff;
      --fcc-divider-color: hsla(0, 0%, 100%, 0.4);
      --fcc-divider-height: 1px;
      --fcc-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
      --fcc-separator-size: 3px;
      --fcc-separator-color: currentColor;

    }
  }
  
  ._qWTcH {
    font-family: inherit;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    cursor: default;
    display: flex;
    align-items: center;
    gap: var(--fcc-spacing);
  }
  ._1tbqx ._3cpN7 {
    margin-bottom: calc(var(--fcc-label-font-size) * 2);
  }
  ._3cpN7 ._2EBbg:not(:last-child) {
    margin-right: var(--fcc-digit-block-spacing);
  }
  ._3cpN7 {
    position: relative;
    display: flex;
    align-items: center;
  }
  ._2aOn7 {
    color: var(--fcc-label-color);
    line-height: 1;
    font-weight: 400;
    font-size: var(--fcc-label-font-size);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 150%);
  }
  ._2EBbg {
    perspective: 200px;
    position: relative;
    font-size: var(--fcc-digit-font-size);
    color: var(--fcc-digit-color);
    font-weight: 500;
    line-height: 0;
    width: var(--fcc-digit-block-width);
    height: var(--fcc-digit-block-height);
    box-shadow: var(--fcc-shadow);
    border-radius: var(--fcc-digit-block-radius);
  }
  ._106d2,
  ._SKh-V {
    position: absolute;
    width: 100%;
    height: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    background: var(--fcc-background);
  }
  ._SKh-V {
    align-items: flex-end;
    top: 0;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    border-bottom: var(--fcc-divider-height) solid var(--fcc-divider-color);
  }
  ._106d2 {
    align-items: flex-start;
    bottom: 0;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
  }
  ._3luxx {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 50%;
    transform-style: preserve-3d;
    transform-origin: bottom;
    transform: rotateX(0);
    border-radius: inherit;
  }
  ._3luxx._2kgZC {
    transition: transform var(--fcc-flip-duration) ease-in-out;
    transform: rotateX(-180deg);
  }
  ._2v-d4 {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
    backface-visibility: hidden;
    background: var(--fcc-background);
  }
  ._1GZQ7 {
    align-items: flex-end;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    border-bottom: var(--fcc-divider-height) solid var(--fcc-divider-color);
  }
  ._3AVXa {
    align-items: flex-start;
    transform: rotateX(-180deg);
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
  }
  ._2hRXr {
    height: var(--fcc-digit-block-height);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  ._1tbqx ._2hRXr {
    margin-bottom: calc(var(--fcc-label-font-size) * 2);
  }
  ._2hRXr:after,
  ._2hRXr:before {
    content: "";
    width: var(--fcc-separator-size);
    height: var(--fcc-separator-size);
    border-radius: 50%;
    background-color: var(--fcc-separator-color);
  }
  ._2hRXr:before {
    margin-bottom: var(--fcc-separator-size);
  }