🎨 Visuals improvements and introduced filters

ProjetProgWeb/stylesheet.css

@@ -27,23 +27,6 @@ header {
     height: 75px;
 }
 
-.slide-in-header {
-    animation: slide-in-header 200ms;
-    animation-fill-mode: forwards;
-}
-.slide-out-header {
-    animation: slide-out-header 200ms;
-    animation-fill-mode: forwards;
-}
-@keyframes slide-in-header {
-    from { margin-bottom: 0 }
-    to { margin-bottom: 100px }
-}
-@keyframes slide-out-header {
-    from { margin-bottom: 100px }
-    to { margin-bottom: 0 }
-}
-
 .navbar {
     position: relative;
     z-index: 50;
@@ -177,16 +160,40 @@ header {
     position: relative;
     z-index: 10;
     width: 100%;
-    height: 100px;
     background: linear-gradient(245deg, #39B4E7 -15%, #1779A3 110%);
     box-shadow: rgba(0, 0, 0, 0.15) 2px 2px 5px;
     top: 0;
-    transform: translateY(-110px);
+    transform: translateY(-105%);
     display: flex;
     flex-direction: column;
     padding: 10px;
     gap: 10px;
 }
+
+#hamburger-menu h3 {
+    color: white;
+    padding: 0;
+    margin: 0;
+}
+
+.filters {
+    display: flex;
+    gap: 5px;
+    color: white;
+    font-family: sans-serif;
+}
+
+.filters p {
+    padding: 3px 10px 3px 10px;
+    border-radius: 10px;
+    background-color: #39B4E7;
+    cursor: pointer;
+}
+
+.filters p:hover {
+    background-color: #6dc1e3;
+}
+
 .slide-in {
     animation: slide-in 200ms;
     animation-fill-mode: forwards;
@@ -196,12 +203,12 @@ header {
     animation-fill-mode: forwards;
 }
 @keyframes slide-in {
-    from { transform: translateY(-100px) }
+    from { transform: translateY(-105%) }
     to { transform: translateY(0) }
 }
 @keyframes slide-out {
     from { transform: translateY(0) }
-    to { transform: translateY(-100px) }
+    to { transform: translateY(-105%) }
 }
 
 .toggle-switch {
@@ -283,9 +290,9 @@ header {
     display: flex;
     flex-direction: column;
     box-shadow: rgba(0, 0, 0, 0.05) 2px 2px 15px;
-    border-radius: 3px;
+    border-radius: 25px;
     margin: 0 5px 0 5px;
-    padding: 0 10px 0 10px;
+    padding: 5px 15px 5px 15px;
     transform: translateX(100px);
 }
 
@@ -482,6 +489,9 @@ header {
         width: 768px;
         margin: auto;
     }
+    #hamburger-menu {
+        flex-direction: row;
+    }
 }
 
 /* Large */