body {
    color: white;
}

#countdown {
    display: flex;
    margin: .25rem auto auto auto;
}

#countdown ul {
    padding: 0.25rem 1rem;
    margin: auto;
}

#countdown ul li {
    display: inline-block;
    font-size: small;
    list-style-type: none;
    padding: 0.25rem 1rem 1rem 1rem;
    text-transform: uppercase;
}

#countdown ul li span {
    display: block;
    margin: auto;
    color: #FFFFFF;
    animation: 10s pulse infinite;
}

@keyframes pulse {
  0% {
    color: white;
  }
  70% {
      color: white;
  }
  85% {
      color: var(--color-red);
  }
  100% {
      color: white;
  }
}

@media only screen and (max-width: 767px) {
    #countdown ul li span {
        font-size: 2.25rem;
    }

    #countdown ul li {
        padding: 0 0.5rem 0 0.5rem;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1200px) {
    #countdown ul li span {
        font-size: 4rem;
    }

    #countdown ul li {
        padding: 0.25rem 1rem 1rem 1rem;
    }
}


@media only screen and (min-width: 1201px) {
    #countdown ul li span {
        font-size: 4.5rem;
    }

    #countdown ul li {
        padding: 1.5rem;
    }
}