responsive web design update

detail.css

@@ -112,7 +112,6 @@ nav:after {
   position: absolute;
   bottom: 0;
   left: 0;
-  width: 20vw;
   width: 20%;
   height: 100%;
   z-index: -1;
@@ -240,12 +239,55 @@ section p {
   font-weight: bold;
 }
 
-@media screen and (max-width: 580px) {
+@media only screen and (max-width: 200px) {
   nav a {
-    font-size: 1.25rem;
+    font-size: 0.55rem;
     line-height: 2rem;
+    width: 20%;
   }
   .scroller:after {
     content: "";
   }
+  h2 {
+    font-size: xx-large;
+  }
+  nav:after {
+    background: linear-gradient(
+      90deg,
+      var(--sect1) 0 calc(20vw - 3px),
+      var(--sect2) 0 calc(40vw - 3px),
+      var(--sect3) 0 calc(60vw - 3px),
+      var(--sect4) 0 calc(80vw - 3px),
+      var(--sect5) 0 100vw
+    );
+  }
+}
+
+/*
+@media only screen and (orientation: landscape) {
+  nav a {
+    font-size: 0.85rem;
+    line-height: 2rem;
+    width: 20%;
+  }
+  .scroller:after {
+    content: "";
+  }
+  h2 {
+    font-size: xx-large;
+  }
+  nav:after {
+    background: linear-gradient(
+      90deg,
+      var(--sect1) 0 calc(20vw - 3px),
+      var(--sect2) 0 calc(40vw - 3px),
+      var(--sect3) 0 calc(60vw - 3px),
+      var(--sect4) 0 calc(80vw - 3px),
+      var(--sect5) 0 150vw
+    );
+  }
+  section {
+    height: 125vh;
+  }
 }
+*/

index.html

@@ -28,7 +28,7 @@
       <img
         src="https://media.licdn.com/dms/image/D4D03AQEt1mkCdln_OA/profile-displayphoto-shrink_800_800/0/1687128382673?e=1708560000&v=beta&t=p0BdA2rn9x31BD9Le45ltHzpLEmDGLBIGAdwwsXOUEs"
         alt="My Photo"
-        width="400px"
+        width="25%"
       />
       <h2>Mehmet Salih Bozkır</h2>
       <p>
@@ -85,7 +85,7 @@ <h2>SKILLS</h2>
         width="100"
       />
       <img
-        src="https://www.aydiner.gen.tr/wp-content/uploads/2019/11/bootstrap-stack.png"
+        src="https://user-images.githubusercontent.com/74038190/212280805-9bcb336b-8c55-46a8-abf8-ff286ab55472.gif"
         width="100"
       />
       <img