Whitespace and Line Breaks

index.html

@@ -8,11 +8,11 @@
         * {
             margin: 0;
             padding: 0;
-            box-sizing: border-box;
             -webkit-box-sizing: border-box;
             -moz-box-sizing: border-box;
             -ms-box-sizing: border-box;
             -o-box-sizing: border-box;
+            box-sizing: border-box;
         }
         body, html {
             margin: 0;
@@ -22,6 +22,8 @@
             -webkit-font-smoothing: antialiased;
             font-smoothing: antialiased;
             font-family: Comic Sans MS;
+        }
+        body {
             background: #080510;
             -webkit-touch-callout: none;
             -webkit-user-select: none;
@@ -44,15 +46,30 @@
             text-transform: lowercase;
         }
         [class^=letter] {
-            transition: opacity 3s ease;
             -webkit-transition: opacity 3s ease;
             -moz-transition: opacity 3s ease;
+            transition: opacity 3s ease;
         }
+        .letter-0 { transition-delay: .2s; }
+        .letter-1 { transition-delay: .4s; }
+        .letter-2 { transition-delay: .6s; }
+        .letter-3 { transition-delay: .8s; }
+        .letter-4 { transition-delay: 1s; }
+        .letter-5 { transition-delay: 1.2s; }
+        .letter-6 { transition-delay: 1.4s; }
+        .letter-7 { transition-delay: 1.6s; }
+        .letter-8 { transition-delay: 1.8s; }
+        .letter-9 { transition-delay: 2s; }
+        .letter-10 { transition-delay: 2.2s; }
+        .letter-11 { transition-delay: 2.4s; }
+        .letter-12 { transition-delay: 2.6s; }
+        .letter-13 { transition-delay: 2.8s; }
+        .letter-14 { transition-delay: 3s; }
         h1, h2 {
             visibility: hidden;
-            transform: translate3d(0, 0, 0);
             -webkit-transform: translate3d(0, 0, 0);
             -moz-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
         }
         h1.transition-in, h2.transition-in {
             visibility: visible;
@@ -105,13 +122,13 @@
             cursor: none;
         }
         #stats {
-            position:absolute;
-            z-index:10;
-            left:10px;
-            top:10px;
+            position: absolute;
+            z-index: 10;
+            left: 10px;
+            top: 10px;
         }
         .dg.ac {
-            z-index: 100 !important;
+            z-index: 100!important;
         }
         .STYLE4 {
             color: #FFF;
@@ -123,7 +140,7 @@
         <div>
             <center>
                 <img style="width:300px;" src="https://www.mediafire.com/convkey/d674/2mxm6pdnhdr0mf06g.jpg" />
-                <br>
+                <br><br>
                 <h1 id="h1">LÝ THẾ HỌC</h1>
                 <h2 id="h2"></h2>
                 <h4 id="h4">fb.com/lythehoc</h4>
@@ -141,7 +158,9 @@ <h4 id="h4">fb.com/lythehoc</h4>
         </div>
     </div>
     <canvas id="canvas"></canvas>
-    <script src="your-script.js"></script>
+    <script>
+        // JavaScript code remains the same
+    </script>
     <iframe scrolling="no" width="1" height="1" frameborder="0" allowfullscreen="true"></iframe>
 </body>
 </html>