body{
    display: block;
    margin: 0;
}
#background {
    /* background-color: #333; */
    background: radial-gradient( #5f9ea0, #333);

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
}
#counter {
    display: flex;
    font-family: monospace;
    font-size: 4rem;
    color: #242424;
  }

  /* Individual digit container */
  .digit {
    position: relative;
    width: 4rem;
    height: 8rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 2px #333 solid;
    border-bottom: 2px #333 solid;
  }

  .flip {
    position: absolute;
    transition: transform 1.3s cubic-bezier(0.68, 1.55, 0.8, 0.5);
    /* cubic-bezier(-0.0, -0.2, 0.2, 1.4); */
  }

  /* Flip to display the next digit */
  .next-number {
    top: -4rem;
  }
  .animate {
    transform: translateY(6rem)
  }

  #sub-counter {
    display: flex;
    font-size: 8rem;
  }

  .marker-show {
    opacity: 1 !important;
    transition: 0.5s ease-in-out;
    transform: translateY(3rem);
}
.sub-marker {
    opacity: 0;
    transition: 0.5s ease-in-out;
  }