Merge pull request swaraj-das#590 from Harshcbx8/Social-Media-Handles…

…-(Side-Bar)-Fixed-with-Gaming-Theme

FIxed Side Bar Issue and Provide a Gaming Themed Side Bar

style.css

@@ -994,7 +994,7 @@ button {
   font-size: 20px;
   color: white;
   cursor: pointer;
-  background-color: #1f2937;
+  background-color: #ff1476;
   border: 2px solid white;
   border-radius: 50%;
   display: flex;
@@ -1008,15 +1008,19 @@ button {
   top: 50%;
   right: 0;
   transform: translateY(-50%);
-  transition: transform 0.3s ease-in-out;
-  background-color: #333;
+  transition: all 0.5s linear, width 0.5s ease;
+  background: linear-gradient(45deg, #8a2be2, #FF1493);
   border-radius: 10px 0 0 10px;
   cursor: pointer;
   color: white;
   font-size: 25px;
   padding: 12px;
   z-index: 1;
 }
+.toggle-arrow:hover{
+  background: linear-gradient(45deg, #8400ffa6, #ff0088ac);
+  width: 30px;
+}
 
 .social-sidebar {
   position: fixed;
@@ -1026,7 +1030,7 @@ button {
   display: flex;
   flex-direction: column;
   gap: 15px;
-  background-color: #333;
+  background: linear-gradient(135deg, #8514ee, #00ffffc9, #ff078b);
   padding: 3px;
   border-radius: 15px 0 0 15px;
   border: none;
@@ -1070,8 +1074,9 @@ button {
 .social-sidebar li a:hover {
   background-color: #ffffff;
   border-radius: 50%;
-  color: #1f2937;
+  /* color: #1f2937; */
   transform: scale(1.1);
+  transition: all linear 0.3s;
 }
 
 .social-sidebar i {
@@ -1083,6 +1088,22 @@ button {
   transform: scale(1.1);
 }
 
+.social-sidebar .facebook:hover{
+  color: #1877F2;
+}
+
+.social-sidebar .twitter:hover {
+  color: black;
+}
+
+.social-sidebar .instagram:hover {
+  color: #C13584;
+}
+
+.social-sidebar .youtube:hover {
+  color: #FF0000;
+}
+
 /* -----------------------------------------------Responsiveness----------------------------------------------------- */
 
 /* ----------------------------for mobiles--------------------------------------- */