.countdown_title{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    align-content: center;
    padding: 20px !important;
    text-align: center;
    width: 300px;
    height: 300px;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: magenta;
    color: white;
    font-family: sans-serif;
    font-weight: 400;
    border: 5px solid white;
}

.wp-block-latest-posts__post-excerpt:has(.countdown_title) {
    width: 100%;
    display: flex;
    justify-content: center;
}

body.home .countdown_title{
    width: 190px;
    height: 190px;
    font-size: 140%;
}

.countdown_title > span{
    animation-name: knipper;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-delay: 500ms;
    opacity: 0;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    align-content: center;
    line-height: 1;
    margin: 0;
    padding: 0;
}

.dagen::after,
.uren::after,
.minuten::after,
.seconden::after{
    position: relative;
    font-size: .5em;
    padding-left: .3em;
    opacity: .5;
}
.dagen::after{
    content: 'dagen';
}
.uren::after{
    content: 'uren';
}
.minuten::after{
    content: 'minuten';
}
.seconden::after{
    content: 'seconden';
}
.dagen{
    font-size: 1.5em;
    transform: translate(-13px, -3px) rotate(-14deg);
}
.uren{
    font-size:.8em;
    transform: translate(30px,-10px) rotate(5deg);
}
.minuten{
    font-size: .7em;
    transform: translate(-30px,-10px) rotate(-10deg);
}
.seconden{
    font-size: .6em;
    transform: translate(50px,-15px) rotate(5deg);
}
.nog{
    font-size: 0.5em;
    transform: translate(0px, -10px);
}
.zomervak{
    font-size: .5em;
    transform: translate(0px, -10px);
}
.datum_tekst{
    font-size: .5em;
    transform: translate(0px, -10px);
}

.finish{
    background-image: url('zomervakantie.webp');
    background-size: cover;

}

@keyframes knipper {
    from{
        opacity: 0.5;
    } to {
        opacity: 1;
    }
}