format typewriter class, create btn appear animation, change scriptLab Logo and menu size

Author: Daniel1000c

css/style.css

@@ -20,6 +20,33 @@ html {
         opacity: 1;
     }
 }
+
+@keyframes textTyping {
+    from {
+        width: 0;
+    }
+    to {
+        width: 100%;
+    }
+}
+
+@keyframes blink-caret {
+    from, to {
+        border-color: transparent;
+    }
+    50% {
+        border-color: lightblue;
+    }
+}
+
+@keyframes appear {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
 /************End of Animation Formatting************/
 
 /************Font face Formatting************/
@@ -71,7 +98,7 @@ header {
 /*Format hamburger menu*/
 .bx-menu {
     padding: 10px;
-    font-size: 7em;
+    font-size: 5em;
     border: 5px solid black;
     border-radius: 8px;
     color: black;
@@ -81,7 +108,7 @@ header {
 /*Format x icon*/
 .bx-x {
     padding: 10px;
-    font-size: 7em;
+    font-size: 5em;
     border: 5px solid black;
     border-radius: 8px;
     z-index: 4;
@@ -149,7 +176,8 @@ header {
 
 /*Format site logo*/
 .siteLogo {
-    max-width: 250px;
+    max-width: 200px;
+    max-height: 180px;
 }
 /************End of Header Formatting************/
 
@@ -230,6 +258,21 @@ section h2 {
     margin-bottom: 50px;
 }
 
+/*Format hero content h2 span*/
+.heroContent h2 span {
+    color: #BDFFFD;
+}
+
+/*Format h2 type animation*/
+.typeWriter {
+    animation: textTyping 3.5s steps(40, end),
+    blink-caret 1s step-end infinite;
+    overflow: hidden;
+    white-space: nowrap;
+    border-right: 10px solid lightcyan;
+    margin: 0 auto;
+}
+
 /*Format hero content a*/
 .heroContent a {
     font-family: var(--primary-round-font);
@@ -244,6 +287,7 @@ section h2 {
     display: inline-block;
     width: 60%;
     margin-top: 20px;
+    animation: appear 1s ease-in;/*Create appear animation*/
 }
 
 /**About section Formatting**/