How to create a downwards arrow in CSS that changes size according to screen size?

I have a CSS arrow that points down.

.bottom {
  display: inline-block;
  width: 2em;
  height: 2em;
  border: 0.2em solid #333;
  border-radius: 50%;
}

.bottom:after {
  content: '';
  display: inline-block;
  margin-top: 0.2em;
  width: 0.7em;
  height: 0.7em;
  border-top: 0.2em solid #333;
  border-right: 0.2em solid #333;
  -moz-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

<div class="accordionArrow">
    <a href="#"><span class="bottom"></span></a>
</div>

This code works as it is supposed to. It creates a circle and places an downward facing arrow in the center. If I resize the window width, the circle remain the same size and arrow remains at the center.

However, all other properties in my CSS are expressed in 'vw'. That way, when I resize the window, the fonts change their size too. I tried converting the 'em' sizes in this CSS to 'vw' and it doesn't work properly. The arrow moves out of the circle as I change the window size. What do I need to do?

Here is the final code based on @Alohci's comment above. This seems to work as expected

CSS

.bottom {
  display: inline-block;
  font-size: 2vw;
  width: 2em;
  height: 2em;
  border: 0.2em solid #333;
  border-radius: 50%;
  /* margin-left: 0.75em; */
}

.bottom:after {
  content: '';
  display: inline-block;
  margin-top: 0.2em;
  width: 0.7em;
  height: 0.7em;
  border-top: 0.2em solid #333;
  border-right: 0.2em solid #333;
  -moz-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

HTML

<div className="accordionArrow">
  <a href="#"><span className="top"></span></a>
</div>

If you want an arrow facing in any other direction, just play with the rotation degrees.