use custom style instead of headings

calc() doesnt work with attr(rel), so this is probably simpler

index.html

@@ -9,10 +9,10 @@
 <link rel="stylesheet" type="text/css" href="main.css?1602704189">
 
 
-<h1>∞∞ Days</h1><br>
+∞∞ Days<br>
-<h1>∞∞ Hours</h1><br>
+∞∞ Hours<br>
-<h1>∞∞ Minutes</h1><br>
+∞∞ Minutes<br>
-<h1>∞∞ Seconds</h1><br>
+∞∞ Seconds<br>
 
 
 <script src="main.js?1602704189"></script>

main.css

@@ -2,4 +2,5 @@ body {
     background-color: black;
     color: #0f0;
     font-family: monospace;
+    font-size: 3rem;
 }

main.js

@@ -22,10 +22,12 @@ const countdown = (target, heading) => {
 
     if (heading === 1 || formatted.filter(timespan => timespan.substr(0, 1) == '-').length === 0) {
         return `
-<h${heading}>${formatted[0]} Days</h${heading}>
+<span style="font-size:${Math.round(100 - 60 * (4 - 4 / heading) / 4)}%">
-<h${heading}>${formatted[1]} Hours</h${heading}>
+${formatted[0]} Days<br>
-<h${heading}>${formatted[2]} Minutes</h${heading}>
+${formatted[1]} Hours<br>
-<h${heading}>${formatted[3]} Seconds</h${heading}>
+${formatted[2]} Minutes<br>
+${formatted[3]} Seconds<br>
+</span>
 `;
     }
 };