我需要缩小蓝色圆圈中的字体大小。 以下是初始代码:

null

ol {
  list-style: none;
  counter-reset: mycounter;
  padding-left: 2.4em;
}

ol>li {
  counter-increment: mycounter;
  position: relative;
  margin-top: 1.5%;
  margin-bottom: 0.6%;
  --size: calc(0.5em + 2.3vw);
  line-height: calc(var(--size) + 0.5em);
}

ol>li::before {
  content: counter(mycounter);
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  font-weight: bold;
  border-radius: 50%;
  background: #1f2c60;
  color: white;
  box-shadow: 0.045em 0.045em 0.07em rgba(0, 0, 0, 0.3);
  --size: calc(0.5em + 2.3vw);
  left: calc(-1 * var(--size) - 1em);
  width: var(--size);
  height: var(--size);
  text-align: center;
  line-height: var(--size);
}

<ol>
  <li>Text1</li>
  <li>Text2</li>
</ol>

null

我尝试将font-size:calc(0.2em+2.3vw)或font-size:calc(var(--size)-0.5em)添加到ol>中； li::before类，它减少了字体大小，但破坏了蓝色圆圈本身的几何形状--它开始看起来不是圆形的。

最后，我想保持圆圈的大小/几何形状，但是缩小它里面字体的大小。 可能吗？