Fix intro text font size on mobile devices

index.html

@@ -60,15 +60,15 @@
     <header id="intro-1" class="container">
       <div class="row">
         <div class="col d-flex flex-column justify-content-around py-5" style="height: 100vh; background-image: url('./img/enjoy_cat.svg'); background-position: center; background-repeat: no-repeat; background-size: contain;">
-          <p class="text-light" style="font-size: 200%">
+          <p class="text-light intro-text">
             Enter a place of depression, authoritarianism and hopelessness – the reality of the chasers.
             Bring in your light, happiness and enthusiasm – the optimism of runners – and do not get "contaminated".
           </p>
-          <p class="text-light" style="font-size: 200%">
+          <p class="text-light intro-text-lg">
             Welcome to the Journey to the End of the Night 2019. Enjoy!
           </p>
-          <p>
-            <a href="#" class="btn btn-circle btn-next-section"></a>
+          <p class="w-100">
+            <a href="#" class="btn btn-circle btn-next-section my-1"></a>
           </p>
         </div>
       </div>
@@ -77,12 +77,12 @@
     <header id="intro-2" class="container">
       <div class="row">
         <div class="col d-flex flex-column justify-content-around" style="height: 100vh">
-          <img src="./img/journey.svg" alt="Journey to the End of the Night" class="img-fluid" style="max-height:50vh">
-          <p class="display-4 text-light">
+          <img src="./img/journey.svg" alt="Journey to the End of the Night" class="img-fluid" style="max-height:30vh">
+          <p class="text-light intro-text-lg">
             <strong>Friday, June 14 2019, 18:15 at Omega Erlangen</strong>
           </p>
-          <p>
-            <a href="#" class="btn btn-circle btn-next-section" onClick="playAndScroll();"></a>
+          <p class="w-100">
+            <a href="#" class="btn btn-circle btn-next-section my-3" onClick="playAndScroll();"></a>
           </p>
         </div>
       </div>

script.js

@@ -46,7 +46,13 @@ $(() => {
   $('header,section').find('.btn-next-section').each((index, element) => {
     element = $(element)
     element.html('<i class="fa animated"></i>');
-    element.addClass('text-light my-5 page-scroll');
+    const noMarginClass = $(element[0].classList).filter(
+      (i, cls) => (cls.startsWith('my-'))
+    ).length === 0;
+    if (noMarginClass) {
+      element.addClass('my-5');
+    }
+    element.addClass('text-light page-scroll');
     var next_section = element.parents('header,section').last().nextAll('header,section').first();
     if (next_section.length === 1) {
       element.attr('href', `#${next_section.attr('id')}`);

style.css

@@ -169,3 +169,21 @@ h3 {
 iframe {
   background: #000;
 }
+
+@media (orientation: portrait) {
+  .intro-text-lg {
+    font-size: 7vw;
+  }
+  .intro-text {
+    font-size: 5vw;
+  }
+}
+
+@media (orientation: landscape) {
+  .intro-text-lg {
+    font-size: 7vh;
+  }
+  .intro-text {
+    font-size: 5vh;
+  }
+}