[Python] Why doesn't my email sent via Python use CSS correctly?

I tried to send emails via smtplib. It correctly works with others' html/css code, but works incorrectly in my case. Here's my Python code:

smtp_server = smtplib.SMTP("smtp.gmail.com", 587)
smtp_server.starttls()
smtp_server.login(email, password)

message = EmailMessage()
message["From"] = email
message["To"] = recipient
message["Subject"] = "Test"
with open("test.html", "r") as file:
text = file.read()

message.set_content(text, subtype="html")

smtp_server.send_message(message)
smtp_server.quit()


Here's my HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style type="text/css">
.email-confirmation {
background-color: #fff;
display: flex;
max-width: 480px;
width: 100%;
flex-direction: column;
overflow: hidden;
color: #000;
margin: 0 auto;
padding: 91px 69px 330px;
font: 15px Inter, sans-serif;
}

.logo {
aspect-ratio: 7.81;
object-fit: contain;
object-position: center;
width: 179px;
align-self: center;
max-width: 100%;
}

.confirmation-title {
font-size: 20px;
font-weight: 600;
align-self: start;
margin-top: 51px;
}

.confirmation-message {
font-weight: 300;
margin-top: 24px;
}

.confirmation-code {
text-align: center;
border-radius: 30px;
background-color: #000;
align-self: center;
margin-top: 55px;
width: 215px;
max-width: 100%;
font-size: 35px;
color: #fff;
font-weight: 700;
padding: 7px 35px;
}

.signature {
font-weight: 500;
align-self: start;
margin-top: 40px;
}
</style>

<section class="email-confirmation">
<img loading="lazy" src="url">
<h1 class="confirmation-title">Подтверждение почты</h1>
<p class="confirmation-message">
Это письмо отправлено, чтобы <br />
подтвердить электронную почту. <br />
<br />
Если это были не Вы, проигнорируйте данное письмо. <br />
<br />
Для завершения подтверждения - <br />
вернитесь к боту и введите этот код.
</p>
<div class="confirmation-code" tabindex="0" role="textbox" aria-label="Confirmation code">173 586</div>
<p class="signature">С уважением, команда Bard!</p>
</section>
</body>
</html>


If I open the file via a browser, the CSS loads correctly, but in Gmail, it doesn't.

Browser view



Gmail view



What can I do to resolve this?

Continue reading...