Bu sayfayı nasıl mobil uyumlu yapabilirim?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2024/2025 Eğitim Yılı Yaş Hesaplama - Tuğba Çelebi Danışmanlık</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}

.card {
margin: 20px;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
overflow: hidden;
}

.card-header img {
max-width: 100%;
height: auto;
display: block;
margin: auto;
}

.card-body {
padding: 15px;
}

table {
width: 100%;
border-spacing: 0;
}

select, input {
width: 100%;
max-width: 150px;
margin: 5px 0;
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}

.btn {
width: auto;
padding: 10px 20px;
color: #fff;
background-color: #28a745;
border: none;
border-radius: 4px;
cursor: pointer;
}

.btn:hover {
background-color: #218838;
}

#Durum {
margin-top: 15px;
padding: 10px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 4px;
}

@media (max-width: 768px) {
.card {
margin: 10px;
}

table {
font-size: 14px;
}

.auto-style3 {
font-size: 12px;
}
}
</style>
</head>

<body>
<div align="center">
<div class="card">
<div class="card-header">
<img alt="Okula Başlıyorum" src="https://www.tugbacelebi.com/okulabasliyorum.png">
</div>
<div class="card-body">
<table>
<tr>
<td colspan="4">
<div id="eyil">
<b>2025 - 2026 Eğitim Öğretim Yılı Okula Başlama Yaşı Kayıtların Yapıldığı Yılın Eylül Ayı Sonu (30/09/2025) itibarıyla hesaplanır.</b>
</div>
</td>
</tr>
<tr>
<td>Doğum Tarihi:</td>
<td>
Gün:
<select id="sGun">
<!-- Gün seçenekleri -->
</select>
Ay:
<select id="sAY">
<!-- Ay seçenekleri -->
</select>
Yıl:
<select id="sYil">
<!-- Yıl seçenekleri -->
</select>
</td>
<td colspan="2">
<input id="btnHesapla" class="btn" type="button" onclick="Hesapla();" value="Hesapla">
</td>
</tr>
<tr>
<td>Ay:</td>
<td colspan="3">
<div id="ay"></div>
</td>
</tr>
<tr>
<td>Kayıt Durumu:</td>
<td colspan="3">
<div id="Durum"></div>
</td>
</tr>
</table>
<p>
<b>
Millî Eğitim Bakanlığı okul öncesi eğitim ve ilköğretim kurumları yönetmeliğinde değişiklik yapılmasına dair yönetmeliği okumak için
<a href="http://www.resmigazete.gov.tr/eskiler/2019/07/20190710-6.htm" target="_blank">tıklayınız</a>.
</b>
</p>
</div>
</div>
</div>
</body>
</html>