For what it's worth, here's what the selectors look like after I ran the CSS through a formatter:
.sassy-theme .esri-widget .sassy-theme .esri-widget--button, .sassy-theme .esri-menu, .sassy-theme .esri-popup, .sassy-theme .esri-popup__main-container{
background-color: rgb(27, 27, 9);
}
.sassy-theme .esri-widget.esri-search, .sassy-theme .esri-search .esri-widget--button , .sassy-theme .esri-widget .esri-menu {
background-color: rgb(198, 198, 63);
color: rgb(121, 5, 50);
font-size:larger;
font-family: 'Montserrat';
}
.sassy-theme .esri-attribution .sassy-theme .esri-attribution a .sassy-theme .esri-popup .esri-attribution .sassy-theme .esri-popup .esri-popup__pointer-direction, .sassy-theme .esri-popup .esri-popup__button, .sassy-theme .esri-button, .sassy-theme .esri-input, .sassy-theme .esri-widget a
The formatter flagged the last line as an error, maybe the extra definitions are conflicting with something? If it's not that, crack open your dev tools and look at the cascade order on those text elements. You might have to select a more specific element, maybe something related to tables.