次のHTMLコードをスマートフォンで見やすくするには、どのようなCSSスタイルを追加すべきですか？
```html
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Website Title</title>
</head>
<body>
    <h1>Main Heading</h1>
    <p>This is a paragraph of text.</p>
    <p>Here is another paragraph of text.</p>
</body>
</html>
```
スマートフォンで見やすくするために、次のCSSスタイルを追加できます。
```css
<style>
body {
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 2.5em;
  margin: 0.67em 0;
}

p {
  font-size: 1em;
  line-height: 1.5;
  margin: 1em 0;
}

@media screen and (max-width: 600px) {
  body {
    font-size: 18px;
  }

  h1 {
    font-size: 3em;
  }

  p {
    font-size: 1.2em;
  }
}
</style>
```
このCSSスタイルを使用すると、スマートフォンDisplayでは文字が大きくなり、読みやすいようになります。また、`@media`クエリを使用して、600ピクセルを超える画面での表示を指定します。