set home section responsive

src/components/Home/Home.css

@@ -12,6 +12,8 @@
 
 #home-section h1{
     margin-bottom: 0;
+    margin-left: 40px;
+    margin-right: 40px;
 }
 
 #home-section h2 {
@@ -49,5 +51,33 @@
 }
 
 
+@media (max-width: 840px) {
+    .btn {
+        margin-bottom: 10%;
+    }
+
+    #home-section p{
+        max-width: 60%;
+    }
+}
+
+@media (max-width: 656px) {
+    #home-section h1{
+        font-size: 3.5rem;
+    }
+    #home-section h2 {
+        font-size: 1.5rem;
+    }
+}
+
+
+@media (max-width: 584px) {
+    #home-section h1{
+        font-size: 3rem;
+    }
+}
+
+
+
 
 

src/components/NavBar/NavBar.css

@@ -40,4 +40,11 @@
 .nav-link.active {
     background-color: rgba(217, 95, 70, 0.3);
     color: var(--important-color);
+}
+
+
+@media (max-width: 768px) {
+    .nav-list{
+        gap: 0.5rem;
+    }
 }

src/components/thirdParty/Background/Background.css

@@ -22,7 +22,7 @@
 
 .planet {
     position: absolute;
-    bottom: 0%;
+    bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 120vw;
@@ -102,3 +102,11 @@
         opacity: 0.6;
     }
 }
+
+
+
+@media (max-width: 840px) {
+    .planet {
+        display: none;
+    }
+}