@@ -25,7 +25,12 @@ body {
   background-position: center;
   z-index: 99999;
 }
-
+.top{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
 /* Dark Mode */
 body.dark-mode {
   background-color: black;
@@ -122,12 +127,14 @@ body.light-mode svg {
 .toggleButton {
   display: inline-block;
   position: absolute;
-  top: 15px;
-  margin: 30px 3px 3px 10px;
-  padding-top: 3px;
+  top: 0;
+  /* margin: 30px 3px 3px 10px; */
+  margin: 20px 3px 3px 10px;
+  /* padding-top: 3px;
   padding-bottom: 3px;
   padding-left: 9px;
-  padding-right: 9px;
+  padding-right: 9px; */
+  padding: 3px;
   border: none;
   border-radius: 50%;
   font-size: 45px;
@@ -193,7 +200,7 @@ a:visited {
 
 .item {
   flex: 50%;
-  width: 100%;
+  width: 90%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.4);
   box-shadow: 0 0 transparent, 0 0 transparent, 0 0 transparent, 0 0 transparent, 0 2px 3px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
@@ -220,19 +227,26 @@ a:visited {
 }
 
 .main {
-  padding: 20px;
-  width: 90vw;
+  /* padding: 20px;
+  width: 90vw; */
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
   grid-gap: 24px;
   row-gap: 24px;
   margin: auto;
+  justify-items: center;
 }
 
 .main a {
   text-decoration: none;
 }
 
+@media only screen and (max-width: 400px) {
+  .main{
+    grid-template-columns: repeat(auto-fit, minmax(90%, 1fr));
+  }
+}
+
 footer {
   background-color: #19172e;
   text-align: center;
@@ -290,13 +304,14 @@ footer a:visited {
 
 input {
   display: inline-block;
-  margin: 0px, 10px, 10px, 10px;
+  /* margin: 0px, 10px, 10px, 10px; */
   border-radius: 25px;
   padding: 10px;
-  width: 15%;
-  position: absolute;
-  top: 6.5%;
-  right: 7%;
+  width: 50%;
+  margin-bottom: 3%;
+  /* position: absolute; */
+  /* top: 6.5%; */
+  /* right: 7%; */
   background: transparent;
   border: 1px solid white
 }
@@ -316,7 +331,7 @@ header {
   }
 }
 
-@media (max-width: 599px) {
+/* @media (max-width: 599px) {
   header {
     text-align: left;
   }
@@ -385,7 +400,7 @@ header {
     width: 150px;
 
   }
-}
+} */
 
 @media (max-width: 102) {
   .size {
@@ -411,14 +426,6 @@ header {
   }
 }
 
-
-#searchbar,
-.toggleButton {
-  display: block;
-  margin: 0 auto;
-}
-
-
 @media only screen and (max-width: 320px) {
   h1 {
     font-size: 18px;
@@ -443,14 +450,14 @@ header {
 @media screen and (max-width: 530px) {
   h1 {
     font-size: 20px;
-    margin-top: 25px;
+    /* margin-top: 25px; */
   }
 }
 
 @media screen and (max-width: 571px) {
   h1 {
     font-size: 20px;
-    margin-top: 25px;
+    /* margin-top: 25px; */
   }
 }
 
@@ -526,58 +533,24 @@ header {
   }
 }
 
-@media screen and (max-width: 330px) {
-  .toggleButton {
-    margin: 45px 3px 3px 10px;
-    padding: 3px;
-
-  }
-}
-
-@media screen and (max-width: 331px) {
+@media screen and (max-width: 571px) {
   .toggleButton {
-    top: 2px;
-    font-size: 39px;
-    margin: 35px 3px 3px 10px;
-    padding-top: 3px;
-    padding-bottom: 3px;
-    padding-left: 8px;
-    padding-right: 8px;
-
+    font-size: 40px;
   }
 }
-
-@media screen and (max-width: 237px) {
+@media screen and (max-width: 401px) {
   .toggleButton {
-    top: 2px;
     font-size: 30px;
-    margin: 45px 3px 3px 10px;
-    padding: 3px;
-
   }
 }
-@media screen and (max-width: 401px) {
+@media screen and (max-width: 301px) {
   .toggleButton {
-    top: 2px;
-    font-size: 45px;
-    margin: 35px 3px 3px 10px;
-    padding-top: 3px;
-    padding-bottom: 3px;
-    padding-left: 9px;
-    padding-right: 9px;
-
+    font-size: 25px;
   }
 }
-@media screen and (max-width: 571px) {
+@media screen and (max-width: 241px) {
   .toggleButton {
-    top: 2px;
-    font-size: 45px;
-    margin: 35px 3px 3px 10px;
-    padding-top: 3px;
-    padding-bottom: 3px;
-    padding-left: 9px;
-    padding-right: 9px;
-
+    font-size: 18px;
   }
 }
 
 
@@ -18,10 +18,12 @@
 
 
   <!-- Heading -->
-  <h1>30 Days of JavaScript</h1>
-  <input id="searchbar" onkeyup="search_project()" type="text" name="search" placeholder='Search projects.....' />
-  <!-- Dark Mode Button -->
-  <button id="toggle" class="toggleButton" type="button" onclick="toggleDarkLight()">🌙</button>
+  <div class="top">
+    <h1>30 Days of JavaScript</h1>
+    <input id="searchbar" onkeyup="search_project()" type="text" name="search" placeholder='Search projects.....' />
+    <!-- Dark Mode Button -->
+    <button id="toggle" class="toggleButton" type="button" onclick="toggleDarkLight()">🌙</button>
+  </div>
 
   <!-- Octocat svg -->
   <a href="https://github.com/swapnilsparsh/30DaysOfJavaScript" class="github-corner" target="_blank"