.fontContainer{
  display:flex;
  width: 100%;
  gap: 10px;
  overflow-y: auto;
  overflow-x:hidden;
  // This fixes bug in webkit where once switching to the themes and back to fonts
  // There is an overflow
  height: 120px;
  flex-direction: column;
  margin-top: 10px;
  flex-grow:1;
  padding-bottom:10px;
}

.font{
  display:flex;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
}
  
.fontName{
  //   font-family: 'inter';
  font-size: 24px;
  width: max-content;

}
  




.settingsContainer{
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-top:10px;
  text-align: center;
}


.fontSizeContainer{
  display: flex;
  gap: 10px;
  align-items: center;
  font-weight: bold;
  // flex-grow:1;
  margin-top: 10px;
  // height: 52px;
  // padding: 15px 0px 15px 0px;
  overflow:hidden;
}
.resizeContainer{
  display:flex;
  width: calc(48px * 0.75);
  height: calc(48px * 0.75);
  font-weight: bold;
  border: 1px solid #9A9A9A;
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  cursor:pointer;
  transition: 0.15s;
  &:hover{
    opacity: 0.8;
  }
  &:active{
    opacity: 0.5;
  }
}

  
.resizeSize{
  width: 50px;
  text-align: center;
  font-weight: 400;
}