font size improvements

css/index.css

@@ -16,10 +16,50 @@ body, html {
     color: white;
 }
 
-#nameText {
+.lightOpacity{
+    opacity: 0.6;
+}
+
+.bigText{
     transition-delay: 200ms;
     font-family: 'Helvetica Neue', fantasy;
-    font-size: 40pt;
     -webkit-font-smoothing: antialiased
     /*    todo here!*/
+}
+
+#preTitle{
+    opacity: 0.8;
+}
+
+/* screen larger than 600px -- desktop */
+@media screen and (min-width: 601px) {
+    #preTitle{
+        font-size: 35px;
+    }
+    #titleText {
+        font-size: 80px;
+    }
+    #subTitleText{
+        font-size: 50px;
+    }
+    #meaningFullSentence{
+        width: 40%;
+    }
+}
+
+/* Screen smaller than 600px -- mobile */
+@media screen and (max-width: 600px) {
+    #preTitle{
+        font-size: 15px;
+    }
+    #titleText {
+        font-size: 30px;
+    }
+    #subTitleText{
+        font-size: 20px;
+    }
+    #meaningFullSentence{
+        width: 100%;
+        font-size: 13px;
+    }
 }

index.html

@@ -58,13 +58,13 @@
 <div id="section1" class="tile">
     <div class="container">
         <div>
-            <h5>Hey, my name is</h5>
+            <div id="preTitle">Hey, my name is</div>
-            <a id="nameText">Lukas Heiligenbrunner</a>
+            <div class="bigText" id="titleText">Lukas Heiligenbrunner</div>
-            <h2 style="opacity: 0.6">A creative Student</h2>
+            <div class="bigText lightOpacity" id="subTitleText">A creative IT Student</div>
-            <a style="opacity: 0.6">
+            <p id="meaningFullSentence" class="lightOpacity">
-                I'm a software engineer based in Austria who loves to <br>
+                I'm a software engineer based in Austria who loves to
                 develop code and is always open for new projects.
-            </a>
+            </p>
         </div>
     </div>
 </div>