.countdown {
    display: flex;
    justify-content: space-evenly;
    margin-top: 20px;
}

.spinner {
    display: block;
    width: 18vw;
    height: 18vw;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -10vw;
    margin-top: -10vw;
    filter: invert(91%) sepia(55%) saturate(4405%) hue-rotate(303deg) brightness(86%) contrast(87%);
}

.countdown-spinner {
    position: relative;
    width: 18vw;
    height: 18vw;
    font-size: 10px;
    text-align: center;
}

.countdown-spinner p {
    display: grid;
    width: 18vw;
    height: 18vw;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -10vw;
    margin-top: -10vw;
}

.countdown-spinner p span {
    align-self: start;
    font-size: 11px;
}

#countdown-days, #countdown-hours, #countdown-minutes, #countdown-seconds {
    align-self: end;
    font-size: 20px;
}

@keyframes spin {
    from {
        transform: rotate(0turn);
    }
    to {
        transform: rotate(1turn);
    }
}

.spinner-days {
    animation: spin 60000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.spinner-hours {
    animation: spin 40000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.spinner-minutes {
    animation: spin 10000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.spinner-seconds {
    animation: spin 5000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}