Push

Style.css

@@ -1,37 +1,31 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Alkatra&family=Delicious+Handrawn&family=Roboto:wght@300&display=swap');
 
-*
-{
+* {
     font-family: "Roboto Light", sans-serif;
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }
 
-li, a, button
-{
+li, a, button {
     font-weight: 500;
     font-size: 16px;
     color: #ecf0f1;
     text-decoration: none;
 }
 
-@media only screen and (max-width: 18cm)
-{
-    li, a, button
-    {
+@media only screen and (max-width: 18cm) {
+    li, a, button {
         font-size: 20px;
     }
 
-    .hideOnMobile
-    {
+    .hideOnMobile {
         display: none;
     }
 }
 
-header
-{
+header {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -39,39 +33,32 @@ header
     background-color: #24242A;
 }
 
-.navLinks
-{
+.navLinks {
     list-style: none;
 }
 
-@media only screen and (max-width: 18cm)
-{
-    .navLinks
-    {
+@media only screen and (max-width: 18cm) {
+    .navLinks {
         display: none;
     }
 }
 
-.navLinks li
-{
+.navLinks li {
     cursor: pointer;
     display: inline-block;
     padding: 0px 20px;
 }
 
 
-.navLinks li a
-{
+.navLinks li a {
     transition: all 0.5s ease 0s;
 }
 
-.navLinks li a:hover, .navLinks li:hover
-{
+.navLinks li a:hover, .navLinks li:hover {
     color: #0088a9;
 }
 
-button
-{
+button {
     padding: 9px 25px;
     background-color: rgba(0, 136, 169, 1);
     border: none;
@@ -80,31 +67,35 @@ button
     transition: all 0.5s ease 0s;
 }
 
-button:hover
-{
+button:hover {
     background-color: rgba(0, 136, 169, 0.3);
 }
 
-nav
-{
+nav {
     order: 1;
 }
 
-h1
-{
+h1 {
     text-align: center;
     font-size: 50px;
 
     color: white;
 }
 
-.margin-top
-{
+@media only screen and (max-width: 18cm) {
+    h1 {
+        text-align: center;
+        font-size: 30px;
+
+        color: white;
+    }
+}
+
+.margin-top {
     margin-top: 50px;
 }
 
-body
-{
+body {
     width: 100vw;
     height: 100vh;
     background-size: cover;
@@ -112,8 +103,7 @@ body
 }
 
 
-.dropdown div
-{
+.dropdown div {
     display: none;
     position: absolute;
     padding: 20px;
@@ -122,33 +112,28 @@ body
     border-radius: 50px
 }
 
-.dropdown div ul li
-{
+.dropdown div ul li {
     margin-top: 10px;
     margin-bottom: 10px;
     text-align: center;
 }
 
-@media only screen and (max-width: 18cm)
-{
-    .dropdown div ul li
-    {
+@media only screen and (max-width: 18cm) {
+    .dropdown div ul li {
         margin-top: 5px;
         margin-bottom: 5px;
         text-align: center;
         padding: 0;
     }
 
-    .dropdown div ul li
-    {
+    .dropdown div ul li {
         margin-top: 5px;
         margin-bottom: 5px;
         text-align: center;
         padding: 0;
     }
 
-    .dropdown div
-    {
+    .dropdown div {
         right: 150px;
         border-radius: 0px;
         top: 10px;
@@ -156,29 +141,24 @@ body
 
 }
 
-.dropdown:hover div ul, .dropdown:hover div
-{
+.dropdown:hover div ul, .dropdown:hover div {
     display: flex;
     flex-direction: column;
 }
 
-.mobileMenuButton
-{
+.mobileMenuButton {
     background-color: rgba(0, 0, 0, 0);
     display: none;
 }
 
-@media only screen and (max-width: 18cm)
-{
-    .mobileMenuButton
-    {
+@media only screen and (max-width: 18cm) {
+    .mobileMenuButton {
         display: inline-block;
         transition: all 0.5s ease 0s;
     }
 }
 
-.mobileMenuButton svg
-{
+.mobileMenuButton svg {
     width: 50px;
     height: 50px;
     position: absolute;
@@ -187,22 +167,18 @@ body
     color: white;
 }
 
-.mobileMenuButton svg:hover
-{
+.mobileMenuButton svg:hover {
     color: #0088a9;
 }
 
-.mobileMenuDropDown
-{
+.mobileMenuDropDown {
     display: none;
     background-color: #24242A;
     transition: all 0.5s ease 0s;
 }
 
 
-
-.mobileMenuDropDown li
-{
+.mobileMenuDropDown li {
     list-style: none;
     margin-top: 10px;
     margin-bottom: 10px;
@@ -211,8 +187,7 @@ body
 }
 
 
-.mobileMenuButton:hover .mobileMenuDropDown
-{
+.mobileMenuButton:hover .mobileMenuDropDown {
     display: flex;
     flex-direction: column;
     position: absolute;