.counter {
    font-size: 22vh;
    text-align: center;
    font-weight: 700;
}

.counter__number {
    color: #ffffff;
    width: 1ch;
    height: 1em;
    line-height: 1;
    overflow: hidden;
    display: inline-block;
    border: 5px solid #9dc7d0;
    margin-right: 20px;
    padding: 0px;
    border-radius: 5px;
    background-color: #13798e;
    position: relative;
    font-size: 24vh;
}

    .counter__number:nth-last-child(3n+4) {
        margin-right: 0.2em;
    }

    .counter__number span {
        display: block;
        text-align: center;
        transition: transform 200ms ease-in-out;
        font-size: 22vh;
    }

        .counter__number span[data-number="0"] {
            transform: translateY(0%);
        }

        .counter__number span[data-number="1"] {
            transform: translateY(-10%);
        }

        .counter__number span[data-number="2"] {
            transform: translateY(-20%);
        }

        .counter__number span[data-number="3"] {
            transform: translateY(-30%);
        }

        .counter__number span[data-number="4"] {
            transform: translateY(-40%);
        }

        .counter__number span[data-number="5"] {
            transform: translateY(-50%);
        }

        .counter__number span[data-number="6"] {
            transform: translateY(-60%);
        }

        .counter__number span[data-number="7"] {
            transform: translateY(-70%);
        }

        .counter__number span[data-number="8"] {
            transform: translateY(-80%);
        }

        .counter__number span[data-number="9"] {
            transform: translateY(-90%);
        }

/* Let's create an environment bellow */



.sayac {
    font-family: 'Montserrat', sans-serif;
}

.pen {
    margin-top: 50vh;
    transform: translateY(-50%);
    position: absolute;
    left : 12%;
}


.counter__number1 {
    background: radial-gradient(circle, rgb(255 255 255 / 26%) 83%, rgb(255 255 255 / 0%) 104%);
    height: 47%;
    width: 94%;
    position: absolute;
    /* z-index: 9999999999999999999999999999999; */
    left: 4px;
    top: 4px;
}

.counter__number2 {
    height: 47%;
    width: 94%;
    position: absolute;
    /* z-index: 9999999999999999999999999999999; */
    left: 4px;
    bottom: 4px;
}