/* Sources : 
  - https://stackoverflow.com/questions/71991566/how-to-create-round-colored-avatars-with-user-initials
  - https://annuaire.in2p3.fr/laboratory/49

  Usage :
    <div class="avatar">
      <span>AB</span>
    </div>
 */
.avatar{
  --tblr-avatar-size:3.5rem;
  width:var(--tblr-avatar-size);        /* <--use the size you choose */
  border-radius:100%;
  text-align: center;
  background:pink no-repeat center/cover;
  text-transform:uppercase;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  height:var(--tblr-avatar-size);
  width:var(--tblr-avatar-size)
}
.avatar span{
  line-height:var(--tblr-avatar-size); /* <--see that it's the same size than the width */
  color:red;
}