Some CSS of my PHP HTML e-mail form don't get into the mail form

I am sending a email with PHPMailer, but aspects of the form CSS do not get into the Mail when send:

Justify-content: center;
align-items: center
And the font-family.
outline-offset: 5px;

Does anyone can tell me why are these CSS not getting into the sent email form, while all the others load with not problem?

If I enter those values in the console, they work, so I don't understand why these CSS values are being delete from the DOM when the mail is sent.

This is my code:

<style>@import url("https://fonts.googleapis.com/css2?family=Thasadith:ital,wght@0,400;0,700;1,400;1,700&display=swap");</style>
        <div style="background-color: #ffffff; margin: auto; width: 65%; border: 1px solid #e1e1e1; outline: 1px solid #e1e1e1; outline-offset: 5px; margin-top: 25px; margin-bottom: 25px;padding: 5px;">
                <div style="display: flex; justify-content: center; align-items: center; background-color: #f35653; margin-bottom: 20px; padding: 30px 0px;">
                <div style="background-image: url(https://i.imgur.com/XPTHrId.png); background-position: center; background-size: cover; width: 50px; height: 50px;"></div>
                <div style="font-size: 40px; text-transform: uppercase; align-self: center; color: white; font-family: Thasadith, sans-serif; font-weight: 700; margin-left: 5px;">Enkou Academy</div></div>
                <div style="padding: 10px 40px 40px;font-size: 15px;">
                <p>We received a request to reset the password for your Enkou Academy account.<br><br>
                To reset the password, click on the link below:<br><br>
                <a href="' . $url . '" style="text-decoration: none; color: #f35652;">Click here!</a><br><br>
                If you didn&#39;t request a password reset, let us know.</p>
                </div>
        </div>'

Solution

Email programs only support a limited subset of CSS. Check out https://www.caniemail.com/ for these.

Flex is supported on Apple Mail and Gmails, but is not supported in Outlooks, Yahoo, AOL https://www.caniemail.com/search/?s=flex. This is why we still write emails using tables!

font-family will work, but you'll find better support if you go to that url (https://fonts.googleapis.com/css2?family=Thasadith:ital,wght@0,400;0,700;1,400;1,700&display=swap) and copy the @font-face into the <style>. Even then, your custom font will only show on Apple, Samsung, and a couple of others: https://www.caniemail.com/search/?s=font-face

E.g. write this:

<style type="text/css">
@font-face {
  font-family: 'Thasadith';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Thasadith Italic'), local('Thasadith-Italic'), url(https://fonts.gstatic.com/s/thasadith/v3/mtG-4_1TIqPYrd_f5R1osnMX-CE.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
mso-font-alt: Arial;
}
</style>

Note the addition of the Outlook font fallback (mso-font-alt).