Some custom css overrides are not working

Hello,

I'm trying to override the elemets shown below by using custom CSS applied to the charm template. The changes that I expected are not taking place, particularly with the profile header. I'm using the light mode but want many of the greyish fonts to be black. Thanks in advance.

#es .es-profile-header__title {
color: #000000 !important;
}


#es .es-profile-header__meta {
color: #000000 !important;
}


#es .es-profile-header-nav {
color: #000000 !important;
}

#es .es-profile-header-nav__link {
color: #000000 !important;
}

#es .es-stream-embed__apps-context, #es .es-stream-embed__achievement-context {
color: #000000 !important;
font-weight: normal;
font-size: 12px;
display: block;
}



#es .es-stream-meta .es-stream-title {
color: #000000 !important;
}