skills page updated 1

assets/css/animation.css

@@ -231,45 +231,45 @@
     @media only screen and (max-width: 1000px) {
 
         #particles-js {
-            margin-bottom: 50px;
+            /* margin-bottom: 50px; */
         }
      }
 
     @media only screen and (max-width: 970px) {
 
         #particles-js {
-            margin-bottom: 80px;
+            /* margin-bottom: 80px; */
         }
     }
 
       @media only screen and (max-width:770px) {
 
         #particles-js {
-            margin-bottom: 90px;
+            /* margin-bottom: 90px; */
         }
 
       }
 
       @media only screen and (max-width:760px) {
 
         #particles-js {
-            margin-bottom: 250px;
+            /* margin-bottom: 250px; */
         }
 
       }
 
       @media only screen and (max-width: 380px) {
 
         #particles-js {
-            margin-bottom: 300px;
+            /* margin-bottom: 300px; */
         }
 
       }
 
       @media only screen and (max-width:320px) {
 
         #particles-js {
-            margin-bottom: 320px;
+            /* margin-bottom: 320px; */
         }
 
       }

assets/css/styles.css

@@ -44,7 +44,7 @@ p {
      line-height: 1.7rem;
 }
 
-@media (width<=350px) {
+@media (width<=450px) {
     .background-body {
         width: fit-content;
     }
@@ -258,7 +258,7 @@ hr {
 @media (max-width: 600px ) {
 
     .home-top-content {
-        margin-bottom: 90px;
+        /* margin-bottom: 90px; */
     }
 }
 
@@ -288,6 +288,49 @@ hr {
     align-self: center !important; /* Add this line to vertically center the.vr element */
 }
 
+ul.my-skills li {
+    list-style: none;
+    margin: 0 15px;
+}
+
+ul.my-skills li img {
+    height: 30px;
+    transition: .8s;
+    text-align: center;
+}
+
+
+ul.my-skills li img:hover {
+transition: transform .5s;
+  width: 35px;
+  height: 35px;
+}
+
+ul.my-skills li span {
+    position: relative;
+    display: grid;
+    width: 55px;
+    height: 55px;
+    border-radius: 50%;
+    background-color: #fff;
+    /* text-align: center; */
+    place-items:center;
+    /* transition: .6s; */
+    box-shadow: 0 5px 4px rgba(0,0,0,.5);
+}
+
+ul.my-skills li span:hover {
+      transform: translate(0, -15%);
+    transition: .7s;
+}
+
+@media only screen and (width < 760px) {
+
+    div.d-flex div.vr {
+        display: none !important;
+    }
+}
+
 /* ============================================================================================================ */
 /*       contacts.html      */
 /* ============================================================================================================ */