I need help. The bigger the number, the more it stretches

[frozen eagle]

My CSS:

body {
    margin-top: 50px;
    text-align: center;
    display: flex;
    justify-content: center;

}

@font-face {
    font-family: 'CursedTimerULiL'; 
    src: url('CursedTimerUlil-Aznm.ttf'); 
}

.container {
    display: flex;
    width: 500px;
    justify-content: space-around;
    background: #1B244A;
    padding: 16px 8px 16px 8px;
    border-radius: 20px;
    border: 8px solid black;

}

.teams {
    font-family: Verdana;
    font-size: 40px;
    text-align: center;
    color: #EEEEEE;
    margin-top: 10px;
}

.counterDeco {
    border-radius: 5px;
    background: #080001;
    font-family: CursedTimerULiL;
    font-weight: 400;
    font-size: 90px;
    color: #F94F6D;
    justify-items: center;
    margin: -20px 0px 20px 0px;
    padding: 10px 50px 5px 50px;
}

button {
    border: 2px solid #9AABD8;
    border-radius: 5px;
    font-family: CursedTimerULiL;
    padding: 9px;
    font-size: 18px;
    background-color: #1B244A;
    color: #9AABD8;
}

Any tips should help me improve my CSS🙏

[frozen eagle]

I guess it won't matter much for a smaller number, but is there a way to automatically reduce the font size instead of creating more space for it?

[frozen eagle]

Nvm, I fixed the stretch issue. I forgot to add the width, but is there a way to automatically reduce the font size when it gets too big?

[robust briar]

In this instance, I would add a max on the number. Score won't/shouldn't go to thousands, so limit its max to 3-digit (999 for example) and it should be ok