diff --git a/static/main.html b/static/main.html
index 13d7436..f95e902 100644
--- a/static/main.html
+++ b/static/main.html
@@ -6,11 +6,46 @@
     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
     <style>
       body {
-          background-color: black;
+          background-color: #33194d;
           color: white;
       }
 
+      .flash {
+          --flash-half-count: 60;
+          --flash-half-duration: .5s;
+          animation-delay: 0s,
+                           var(--flash-half-duration),
+                           calc( (var(--flash-half-count) - 1) * var(--flash-half-duration) );
+          animation-duration: var(--flash-half-duration);
+          animation-name: fade, flashing, fade;
+          animation-timing-function: ease-in, ease-in-out, ease-in;
+          animation-iteration-count: 1, calc(var(--flash-half-count) - 2), 1;
+          animation-direction: normal, alternate, reverse;
+          animation-play-state: paused;
+      }
+
+      @keyframes fade {
+          from {
+              background-color: #33194d;
+          }
+
+          to {
+              background-color: orange;
+          }
+      }
+
+      @keyframes flashing {
+          from {
+              background-color: orange;
+          }
+
+          to {
+              background-color: rebeccapurple;
+          }
+      }
+
       #status_box {
+          background-color: black;
           margin: auto;
           width: 30%;
           border-style: ridge;
@@ -39,7 +74,7 @@
       }
     </style>
   </head>
-  <body>
+  <body class="flash">
     <section id="status_box">
       <table>
         <tr>
@@ -118,6 +153,20 @@
             secs = (secs < 10) ? '0' + secs : secs;
             let demidiemity = (hours / 12)|0 ? 'PM' : 'AM';
             $('#last_ring').text(`${hours12}:${mins}:${secs} ${demidiemity}`);
+
+            // CSS Animations don't provide a way to restart them.
+            // Instead, we can temporarily override the animation property to 'none' then the
+            // animation will restart when we re-inheirit from the stylesheet.
+            let flashers = $('.flash').each((_, e) => {
+              e.style.animation = '';
+              e.style.animationPlayState = 'running';
+
+              let end_count = 0;  // Each sub-animation fires its own event
+              let $e = $(e);
+              $e.off();
+              $e.on('animationend',
+                    ev => { if (++end_count == 3 ) ev.target.style.animation = 'none paused'});
+            });
           });
         };
 
@@ -142,7 +191,6 @@
         status_line.append(template);
       }
 
-
     </script>
   </body>
 </html>
