checkpoint use CSS styles to format support and social media

In addition to being CSS-enabled, we added Responsive Web Design
support for smaller screen widths.

TODO: test HTML validation

index.html

@@ -448,8 +448,8 @@ FAQ on “<a href="faq.html#menus">website menus</a>”.</p>
 <table>
 <tr>
 <td colspan="3" style="padding-top: 12px;">
-<font style="font-family: Georgia, serif; font-weight: bold; page-break-after: avoid; font-size: 1.5em; color: DarkBlue;">  Support IOCCC</font>
-<font style="font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-weight: bold; page-break-after: avoid; font-size: 0.75em; color: black;">   click below to support</font>
+<span id="pseudo_h3">  Support IOCCC</span>
+<span id="small_click_below">   click below to support</span>
 </td>
 </tr>
 <tr>
@@ -460,9 +460,7 @@ FAQ on “<a href="faq.html#menus">website menus</a>”.</p>
     <a href="https://coff.ee/ioccc"><img src="png/buymeacoffee.128x38.png" alt="Buy Me A Coffee logo" width=128 height=38></a>
 </td>
 <td>
-    <a href="https://github.com/sponsors/ioccc-src"><img src="png/GitHub.128x51.png"
-     alt="GitHub logo"
-     width=128 height=51></a>
+    <a href="https://github.com/sponsors/ioccc-src"><img src="png/GitHub.128x51.png" alt="GitHub logo" width=128 height=51></a>
 </td>
 </tr>
 </table>
@@ -471,8 +469,8 @@ FAQ on “<a href="faq.html#menus">website menus</a>”.</p>
 <table>
 <tr>
 <td colspan="3" style="padding-top: 12px;">
-<font style="font-family: Georgia, serif; font-weight: bold; page-break-after: avoid; font-size: 1.5em; color: DarkBlue;">  IOCCC on Social Media</font>
-<font style="font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-weight: bold; page-break-after: avoid; font-size: 0.75em; color: black;">   click below to visit</font>
+<span id="pseudo_h3">  IOCCC on Social Media</span>
+<span id="small_click_below">   click below to visit</span>
 </td>
 </tr>
 <tr>