Make headings response to prevent overflowing

Otherwise we have x-axis scroll on mobile, which looks ugly
Change-Id: Ia38b85e2372064c79be4ba532050806280b7aa86
diff --git a/index.html b/index.html
index de6596f..b66645c 100644
--- a/index.html
+++ b/index.html
@@ -59,7 +59,7 @@
       <div class="row">
         <div class="col-md-5">
           <div class="col-md-12">
-            <h1 class="display-3 mb-4">BlissRoms</h1>
+            <h1 class="heading display-3 mb-4">BlissRoms</h1>
             <p class="lead">An open-source operating system based on Android with customizations, options and added
               security features.&nbsp;<br></p>
             <div class="d-inline-flex justify-content-center align-items-center mx-auto">
@@ -140,7 +140,7 @@
         <div class="col-md-6 order-2 order-md-1 mt-4"> <img class="img-fluid d-block mx-auto"
             src="images/phone-multitasking.png" width="50%"> </div>
         <div class="px-md-5 col-md-6 d-flex flex-column align-items-start justify-content-center order-1 order-md-2">
-          <h3 class="display-3 mb-4">Downloads</h3>
+          <h3 class="heading display-3 mb-4">Downloads</h3>
           <img
             src="https://img.shields.io/sourceforge/dm/blissroms.svg?style=for-the-badge&amp;logo=appveyor&amp;colorB=blue"
             max-width="160px" width="50%">