delete some extra media quieries inside project.css file

Author: SyedArslanHaider

MultiPage-Clone/css/project.css

@@ -207,9 +207,8 @@ ul {
     background-color: var(--clr-Black);
   }
 }
-@media screen and (min-width: 1200px) {
+
   main {
-    margin-top: 9rem;
     width: 100vw;
     height: auto;
     background-color: var(--clr-Dark-beige);
@@ -332,143 +331,22 @@ ul {
        font-size: 21px;
        text-decoration: none;
    }
-}
 
-@media screen and (min-width: 900px) {
-    main {
-        margin-top: 9rem;
-        width: 100vw;
-        height: auto;
-        background-color: var(--clr-Dark-beige);
-    }
 
-    nav {
-        height: 150px;
-    }
-
-    .empty {
-        height: 20px;
-        visibility: hidden;
-    }
-
-    .project-text {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        gap: 7px;
-        padding: 1rem;
-    }
-
-    .project-text p {
-        width: 1.2rem;
-        height: 1.2rem;
-    }
-
-    .project-text span {
-        font-family: poppins;
-        font-size: 2rem;
-        font-weight: bold;
-    }
-
-    .box {
-        width: 0.8rem;
-        height: 0.8rem;
-        background-color: var(--clr-Royal-blue);
-    }
-
-    .top-paragraph {
-        margin-top: 0;
-        width: 60%;
-        font-size: 1.2rem;
-        height: 124px;
-        margin-left: auto;
-        font-family: Quicksand;
-        margin-right: auto;
-        letter-spacing: 2px;
-    }
-    .main-container {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        margin-top: 0.3rem;
-        gap: 1.8rem;
-    }
-
-    .container {
-        background-color: var(--clr-White);
-        border-radius: 3px;
-        box-shadow: 0 1px 1px var(--clr-Black);
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        width: 750px;
-        height: 404px;
-    }
-.container p {
-    padding: 0.6rem;
-    font-family: Quicksand;
-    font-size: 0.99rem;
-    letter-spacing: 0.5px;
-}
-    .small-box {
-        width: 10px;
-        height: 50px;
-        background-color: var(--clr-Royal-blue);
-        margin: 0;
-        padding: 0;
-    }
-
-    .box-one {
-        grid-column: 1 / 2;
-        grid-row: 1 / 2;
-        display: flex;
-        align-items: flex-start;
-        margin-top: 1.7rem;
-    }
-
-    .container p {
-        grid-column: 1 / 2;
-        grid-row: 2 / 3;
-        padding: 1rem;
-        font-size: 1.3rem;
-        margin-top: 0;
-    }
-
-    .text-content {
-        margin-left: 0.5rem;
-    }
-
-    .box-two {
-        grid-column: 2 / 3;
-        grid-row: 1 / 3;
-        align-self: center;
-        height: 100%;
-        display: flex;
-        justify-content: flex-end;
-    }
-
-    .box-two img {
-        width: 320px;
-        height: 404px;
-        text-align: end;
-        object-fit: cover;
-    }
-
-    .social-icons {
-        display: flex;
-        justify-content: center;
-        gap: 25px;
-    }
-
-    .social-link {
-        color: var(--clr-Black);
-        font-size: 21px;
-        text-decoration: none;
-    }
-}
-
-/* .................. Main for 400px..............*/
+   @media screen and (min-width: 770px) {
+     main{
+        margin-top: 10rem;
+     }
+     .main-container {
+     margin-top: 4rem;
+     }
+   }
+
+/* .................. Main for 768px..............*/
 @media screen and (max-width: 768px) {
+    nav {
+     height: 100px;
+        }
   main {
     width: 100vw;
     height: auto;