.countdownouter{    
    height: 150px;    
    width: 100%;
    padding:1em;
    display: flex;
    justify-content: center;
    align-items: center;    
}
.countdown{
    border: 5px solid black;
    display:flex;
    height:100%;    
}
.countdown .timebox
{
    height: 100%;
    aspect-ratio: 1/1;
    border-right: 5px solid black;
    background:#aa7fc2;
    position: relative;    
}
.timebox p{
    font-family: 'Equestria', Helvetica;
}
.countdown .timebox .label{
    background:black;    
    position:absolute;
    top:100%;
    left:0;
    right:0;    
    text-align:center;
    color:white;
    margin:0;
    padding:0;
    font-family: 'Equestria', Helvetica;
}
.timebox:last-child{
    border-right:none;
}
.timebox .numbers{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    text-align: center;        
    overflow:hidden;
}
.timebox .numbers .numbercontainer{
    width:100%;
    height:100%;
    display:flex;
    justify-content: center;
    align-items: center;
    transition: margin 300ms cubic-bezier( 1, 0.13, 0.71, 0.84 );    
}
.timebox .numbers .numbercontainer p{    
    margin:0;
    padding:0;
    font-size: 7em;
}