labguage and colormode support

src/css/TechStack.css

@@ -1,66 +1,74 @@
 .techStackContainer {
-    grid-area: 4 / 1 / 8 / 5;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    animation-duration: 1s;
+  grid-area: 4 / 1 / 8 / 5;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  animation-duration: 1s;
+}
+
+.techStackContainer.expanded {
+  grid-area: 4 / 1 / 10 / 5;
+  min-width: 356.43px;
+}
+
+.techStackContainer h2 {
+  margin-bottom: 10px;
+  align-self: flex-start;
+}
+
+.techIcon {
+  width: 4rem;
+  height: 4rem;
+  filter: grayscale(0.7);
+  transition: transform 0.3s ease, filter 0.3s ease;
+}
+
+.techStackContainer.light .techIcon {
+  filter: none;
+}
+
+.techIcon:hover {
+  filter: none;
+  animation: tada 1s;
+  cursor: pointer;
+}
+
+.techStack {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-bottom: 1rem;
+}
+
+.techStackShowMore {
+  font-size: 1.2rem;
+  color: rgb(151, 151, 151);
+  text-decoration: none;
+  border-bottom: 1px solid rgb(151, 151, 151);
+  /*   align-self: flex-start; */
+}
+
+.techStackContainer.light .techStackShowMore {
+  color: rgb(61, 61, 61);
+  border-color: rgb(61, 61, 61);
+}
+
+@keyframes techIconHover {
+  10% {
+    transform: scale();
   }
-  
-  .techStackContainer.expanded {
-    grid-area: 4 / 1 / 10 / 5;
-    min-width: 356.43px;
-  }
-  
-  .techStackContainer h2 {
-    margin-bottom: 10px;
-    align-self: flex-start;
-  }
-  
-  .techIcon {
-    width: 4rem;
-    height: 4rem;
-    filter: grayscale(0.7);
-    transition: transform 0.3s ease, filter 0.3s ease;
-  }
-  
-  .techIcon:hover {
-    filter: none;
-    animation: tada 1s;
-    cursor: pointer;
-  }
-  
-  .techStack {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-wrap: wrap;
-    gap: 10px;
-    margin-bottom: 1rem;
-  }
-  
-  .techStackShowMore {
-    font-size: 1.2rem;
-    color: rgb(151, 151, 151);
-    text-decoration: none;
-    border-bottom: 1px solid rgb(151, 151, 151);
-    /*   align-self: flex-start; */
-  }
-  
-  @keyframes techIconHover {
-    10% {
-      transform: scale();
-    }
-  }
-  
-  /* Smooth expand/collapse animations */
-  .techStackContainer {
-    max-height: 320px; /* Initial max-height */
-    overflow: hidden;
-    transition: max-height 1s ease-in-out;
-  }
-  
-  .techStackContainer.expanded {
-    max-height: 600px; /* Expanded max-height */
-  }
-  
+}
+
+/* Smooth expand/collapse animations */
+.techStackContainer {
+  max-height: 320px; /* Initial max-height */
+  overflow: hidden;
+  transition: max-height 1s ease-in-out;
+}
+
+.techStackContainer.expanded {
+  max-height: 600px; /* Expanded max-height */
+}