Одиночка Айс, это довольно распространенный прием, думала, что короткой фразы будет достаточно для понимания.
Расшифрую: кастомное пишется инлайном элементу (т.е. для бэка по сути ничем не отличается от вставки урла для img), а используется в псевдо.
War4, даже в вашей песочнице невооруженным глазом видно, что это не так.
А так, обычные ошибки от невнимательности. Сравните названия классов в html и в css. И научитесь пользоваться инструментами разработчика, они хорошо помогают.
У вас там всё в em, ну так и поменяйте font-size всё пропорционально увеличится.
Если при этом не должны увеличиваться цифры, то либо переопределите для них font-size либо замените размеры круга на px. Для удобства можно через кастомные и calc. Чтобы потом менять только один размер.
Но заметно удобнее делать такие диаграммки с помощью svg.
С помощью таблицы и сделать.
Попробуйте конкретизировать вопрос.