Why is the email handler in Drupal 9 webform not rendering the CSS in its body?

Question

I am trying to include the submitted data in the email body and email users every time an user submits a form. I am using the same html and css code for both email body and PDF attachment. The CSS code in the PDF file is rendered perfectly, but the email body is not rendering anything. Here is my HTML code:

<style>
    th {
        background-color: rgba(143, 220, 242, 0.67);
        border: 1px solid rgba(5, 138, 222, 0.67);
        border-left: 1px solid rgba(5, 138, 222, 0.67);
        border-bottom: 1px solid rgba(5, 138, 222, 0.67);
        color: #000000;
        text-align: center;
        font-weight: bold;
        vertical-align: middle;
        padding: .75em .5em;

    }

    td {
        text-align: right;
        border: 1px solid rgba(5, 138, 222, 0.67);
        vertical-align: middle;
        padding: .75em .5em;
    }

    table {
        border-collapse: collapse;
        border: 1px solid rgba(5, 138, 222, 0.67);
        empty-cells: show;
        margin: 1%;
        width: 100%;
        table-layout: auto;
    }

    #exception {
        background-color: rgba(143, 220, 242, 0.67);
        border: 1px solid rgba(5, 138, 222, 0.67);
        border-left: 1px solid rgba(5, 138, 222, 0.67);
        border-bottom: 1px solid rgba(5, 138, 222, 0.67);
        color: #000000;
        text-align: center;
        font-weight: bold;
        vertical-align: middle;
        padding: .75em .5em;
    }
</style>

<p>[webform_submission:webform]</p>

<table>
    <tr>
        <th>MAKE CHECKS PAYABLE TO:</th>
        <th>SPECIAL HANDLING (CHECK ONE)</th>
    </tr>
    <tr>
        <td>[webform_submission:values:make_checks_payable_to_]</td>
        <td rowspan="2">[webform_submission:values:special_holding]</td>
    </tr>
    <tr>
        <td>[webform_submission:values:address]</td>
    </tr>
</table>
<br>
<table>
    <tr>
        <th>REQUEST BY</th>
        <th>TODAY'S DATE</th>
        <th colspan="2">DUE DATE</th>
    </tr>
    <tr>
        <td>[webform_submission:values:requested_by_01_requested_by_2]</td>
        <td>[webform_submission:values:requested_by_01_today_s_date]</td>
        <td colspan="2">[webform_submission:values:requested_by_01_due_date]</td>
    </tr>
    <tr>
        <td id="exception">REQUEST CURRENCY</td>
        <td>[webform_submission:values:currency_rate_01_request_currency]</td>
        <td id="exception">EXCHANGE RATE</td>
        <td>[webform_submission:values:currency_rate_01_exchange_rate]</td>
    </tr>
</table>
<br>

<table>
    <tr>
        <th>QTY</th>
        <th>PURPOSE</th>
        <th>ACCOUNT CODE</th>
        <th>TOTAL PRICE</th>
    </tr>

    {% for my_item in data.item %}
    <tr>
        <td>{{my_item.qty}}</td>
        <td>{{my_item.purpose}}</td>
        <td>{{my_item.acct_num}}</td>
        <td>{{'$ ' ~ my_item.total}}</td>
    </tr>
    {% endfor %}
    <tr>
        <td colspan="3" id="exception">SUBTOTAL</td>
        <td>[webform_submission:values:balance_due_01_sub_total]</td>
    </tr>
</table>

<table>
    <tr>
        <th>AUTHORIZED PURCHASER</th>
        <th>DIRECTOR APPROVAL</th>
    </tr>
    <tr>
        <td height="100"></td>
        <td height="100"></td>
    </tr>
    <tr>
        <th>ACCT APPROVAL</th>
        <th>EXEC APPROVAL</th>
    </tr>
    <tr>
        <td height="100"></td>
        <td height="100"></td>
    </tr>
</table>

This is the email body I have been receiving