Add favicon & mobile optimization

public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M219.3 .5c3.1-.6 6.3-.6 9.4 0l200 40C439.9 42.7 448 52.6 448 64s-8.1 21.3-19.3 23.5L352 102.9l0 57.1c0 70.7-57.3 128-128 128s-128-57.3-128-128l0-57.1L48 93.3l0 65.1 15.7 78.4c.9 4.7-.3 9.6-3.3 13.3s-7.6 5.9-12.4 5.9l-32 0c-4.8 0-9.3-2.1-12.4-5.9s-4.3-8.6-3.3-13.3L16 158.4l0-71.8C6.5 83.3 0 74.3 0 64C0 52.6 8.1 42.7 19.3 40.5l200-40zM111.9 327.7c10.5-3.4 21.8 .4 29.4 8.5l71 75.5c6.3 6.7 17 6.7 23.3 0l71-75.5c7.6-8.1 18.9-11.9 29.4-8.5C401 348.6 448 409.4 448 481.3c0 17-13.8 30.7-30.7 30.7L30.7 512C13.8 512 0 498.2 0 481.3c0-71.9 47-132.7 111.9-153.6z" fill="#634AFF"/></svg>

src/components/Card/styles.sass

@@ -20,4 +20,12 @@
 
   .btn-area
     display: flex
-    gap: 0.5rem
+    gap: 0.5rem
+    flex-wrap: wrap
+
+@media screen and (max-width: 510px)
+  .card
+    width: 100%
+
+    .btn-area
+      justify-content: center

src/components/Navigation/Navigation.jsx

@@ -9,15 +9,15 @@ export const Navigation = () => {
 
                 <div className="nav-items">
                     <div className="nav-item nav-item-active">
-                        <GamepadOutlined />
+                        <GamepadOutlined/>
                         <h3>Alle Spiele</h3>
                     </div>
                     <div className="nav-item">
-                        <TrendingUpOutlined />
+                        <TrendingUpOutlined/>
                         <h3>Wirtschaft</h3>
                     </div>
                     <div className="nav-item">
-                        <HistoryEduOutlined />
+                        <HistoryEduOutlined/>
                         <h3>Geschichte</h3>
                     </div>
                 </div>

src/components/Navigation/styles.sass

@@ -46,4 +46,22 @@ nav
     color: $text-light
     font-size: 14pt
     font-weight: 500
-    text-decoration: none
+    text-decoration: none
+
+.nav-mobile
+  display: none
+
+
+@media screen and (max-width: 1024px)
+  nav
+    margin: 1rem 1rem
+
+  .nav-items
+    display: none
+
+@media screen and (max-width: 510px)
+  nav
+    margin: 1rem 0.5rem
+
+  .action-buttons
+    display: none

src/styles/main.sass

@@ -43,5 +43,17 @@ footer
   display: flex
   justify-content: center
 
+  p
+    text-align: center
+
   span
-    color: $primary
+    color: $primary
+
+
+@media screen and (max-width: 1024px)
+  main
+    margin: 3rem 10vw
+
+@media screen and (max-width: 768px)
+  main
+    margin: 3rem 5vw