/* this example will work for globalhealth */
/* colors will need to change for other sites */
/* may need other adjustment as well */

/* use SVG background mask technique to replace cute bird with X logo
in versions of FontAwesome < 6.4.2 */
.fa-twitter::before {
    /* remove the twitter bird by making the content a space */
    content: "\00A0";
    
    /* set the display so that we can control the size of the element */
    display: inline-block;
    width: .875em;
    margin-left: -2px;
    
    /* this background color will be masked by the twitter-x svg */
    background-color: #74000e;
    
    /* Store the SVG in a variable so it's easy to re-use */
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Free 6.4.2 by @fontawesome - http://fontawesome.com License - http://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'/%3E%3C/svg%3E");
    
    /* Chrome still requires prefix in 2022 */
    -webkit-mask-image: var(--svg);
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;

    /* Firefox and Safari */
    mask-image: var(--svg);
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    
    transition: background-color 0.75s;
}

.fa-twitter:hover::before {
    background-color: #00204d;
}