modify the styles

static/styles/features.css

@@ -21,6 +21,7 @@ a {
 
 html {
   scroll-behavior: smooth;
+  font-size: 20px;
 }
 
 body {
@@ -48,13 +49,13 @@ header .container a {
   font-family: "Romanesco", system-ui, -apple-system, BlinkMacSystemFont,
     "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
     sans-serif;
-  font-size: 50px;
+  font-size: 2.5rem;
   color: var(--secondary);
   cursor: pointer;
 }
 
 .hero {
-  height: 77vh;
+  min-height: 77vh;
   position: relative;
   background-color: var(--primary);
   display: flex;
@@ -65,7 +66,9 @@ header .container a {
 
 .hero img {
   position: absolute;
-  width: 122%;
+
+  left: -100px;
+  width: 100%;
   top: 42%;
   opacity: 0.4;
 }
@@ -78,21 +81,21 @@ header .container a {
 }
 
 .hero .hero-content h1 {
-  font-size: 40px;
+  font-size: 2rem;
   font-weight: 900;
   letter-spacing: 2px;
   margin-bottom: 20px;
 }
 
 .hero .hero-content h3 {
-  font-size: 30px;
+  font-size: 1.5rem;
   font-weight: 200;
   letter-spacing: 4px;
   margin-bottom: 20px;
 }
 
 .hero .hero-content p {
-  font-size: 17px;
+  font-size: 0.85rem;
   font-weight: 200;
   letter-spacing: 4px;
   margin-bottom: 20px;
@@ -160,6 +163,7 @@ header .container a {
   flex-wrap: wrap;
   gap: 30px;
   margin-bottom: 50px;
+  padding: 0 10px;
 }
 
 .steps-content .steps-wrapper .step {
@@ -167,7 +171,8 @@ header .container a {
   color: var(--secondary);
   gap: 10px;
   padding: 20px;
-  width: 320px;
+
+  width: 270px;
   height: 150px;
   border-radius: 5px;
   background-color: var(--primary);
@@ -388,9 +393,10 @@ header .container a {
 .upload .upload-content .wrapper .prompt-wrapper {
   display: flex;
   align-items: center;
-  width: 60%;
-  max-height: 900px;
-  min-width: 300px;
+  width: 90%;
+
+  max-width: 900px;
+  min-width: 270px;
   height: 40px;
   margin: 0 auto;
   border: 1px solid var(--primary);
@@ -426,7 +432,7 @@ header .container a {
 }
 
 .result {
-  display: none;
+
   padding: 20px 0;
 }
 
@@ -505,4 +511,43 @@ footer {
   font-size: 30px;
   color: var(--secondary);
   background-color: var(--primary);
+}
+
+
+@media (max-width:576px) {
+  html {
+    font-size: 13px;
+  }
+
+
+
+  .raison {
+    padding: 5px;
+  }
+
+  .title {
+    font-size: 25px;
+  }
+
+
+  .upload .upload-content .wrapper .prompt-wrapper button {
+    padding: 0 5px;
+    font-size: 10px;
+    font-weight: 400;
+  }
+}
+
+@media (max-width:768px) and (min-width:576px) {
+  html {
+    font-size: 16px;
+  }
+
+
+  .title {
+    font-size: 27px;
+  }
+
+  .raison {
+    padding: 10px;
+  }
 }

static/styles/index.css

@@ -20,6 +20,7 @@ a {
 
 html {
   scroll-behavior: smooth;
+  font-size: 20px;
 }
 
 body {
@@ -39,7 +40,7 @@ header div {
 
 header div a {
   font-family: "Romanesco";
-  font-size: 50px;
+  font-size: 2.5rem;
   color: var(--secondary);
   cursor: pointer;
 }
@@ -69,7 +70,7 @@ header div a {
 }
 
 .hero .hero-content h3 {
-  font-size: 17px;
+  font-size: 0.85rem;
   font-weight: 200;
   letter-spacing: 3px;
   margin-bottom: 20px;
@@ -77,7 +78,7 @@ header div a {
 
 .hero .hero-content h1 {
   font-family: "Roboto";
-  font-size: 40px;
+  font-size: 2rem;
   font-weight: bolder;
 }
 
@@ -155,13 +156,12 @@ header div a {
   text-transform: capitalize;
   margin-bottom: 70px;
   font-weight: 500;
-  font-size: 15px;
+  font-size: 1rem;
 }
 
 .features {
   position: relative;
   overflow: hidden;
-  min-height: 78vh;
   margin-bottom: 50px;
 }
 
@@ -191,7 +191,7 @@ header div a {
   color: var(--secondary);
   text-align: center;
   width: 100%;
-  max-width: 400px;
+  max-width: 300px;
   padding: 20px 10px 0;
   border-radius: 8px;
   height: 300px;
@@ -211,6 +211,10 @@ header div a {
 
 .feature h2 {
   font-size: 25px;
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .feature p {
@@ -218,11 +222,12 @@ header div a {
   font-weight: 100;
   margin-top: 20px;
   width: 100%;
+  margin-bottom: 20px;
 }
 
 .btn-wrapper {
   width: 100%;
-  flex: 1;
+
   padding-bottom: 30px;
   display: flex;
   align-items: flex-end;
@@ -254,4 +259,30 @@ footer {
   font-size: 30px;
   color: var(--secondary);
   background-color: var(--primary);
+}
+
+@media (max-width:576px) {
+  html {
+    font-size: 13px;
+  }
+
+
+
+  .hero .hero-content .buttons a {
+    padding: 5px 10px;
+  }
+
+
+}
+
+@media (max-width:768px) and (min-width:576px) {
+  html {
+    font-size: 16px;
+  }
+
+
+  .hero .hero-content .buttons a {
+    padding: 5px 10px;
+  }
+
 }

templates/DataVisualisation.html

@@ -112,4 +112,5 @@
 
 </body>
 
+
 </html>