style - added favicon and some ui changes

responsive.css

@@ -19,14 +19,16 @@
         display: flex;
         align-content: center;
         justify-content: center;
+        opacity: 0;
         /* box-shadow: 0 10px 7px -10px var(--shadow-color); */
         box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
         box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
-        transition: height 0.5s cubic-bezier(0.23, -0.18, 0.38, 0.68);
+        transition: all 0.5s cubic-bezier(0.23, -0.18, 0.38, 0.68);
     }
 
     .nav-links.open {
         height: 300px;
+        opacity: 1;
     }
 
     .nav-links ul {
@@ -51,7 +53,7 @@
 
 @media screen and (max-width : 680px) {
     .card {
-        max-width: 250px;
+        max-width: 350px;
     }
 
     .card-header img {

style.css

@@ -96,7 +96,8 @@ ul {
     margin: auto;
     overflow: hidden;
 }
-.hover-link.active{
+
+.hover-link.active {
     border-bottom: 2px solid var(--primary-text-color);
 }
 
@@ -186,8 +187,9 @@ nav {
     height: 100%;
     padding: 5px 12px;
     border-radius: 5px;
-    border: 2px solid #424242;
+    border: 1px solid var(--primary-text-color);
     font-family: 'Poppins', sans-serif;
+    background-color: var(--card-color);
 }
 
 .search-btn {
@@ -308,12 +310,17 @@ main {
 }
 
 .card-header {
-    max-width: 100%;
+    width: 100%;
+    height: 165px;
+    overflow: hidden;
+    display: flex;
 }
 
 .card-header img {
-    max-width: 100%;
-    height: 170px;
+    /* max-width: 100%;
+    height: 170px; */
+    width: 100%;
+    object-fit: cover;
 }
 
 .card-content {