restructured to public folder

src/css/header.css

@@ -1,120 +0,0 @@
-#navigation {
-  position: relative;
-  z-index: 2;
-  background-color: rgba(0, 0, 0, 0.4);
-  padding: 12px;
-  -webkit-backdrop-filter: blur(4px);
-  backdrop-filter: blur(4px);
-  margin-bottom: -70px;
-  outline: 1px solid rgba(0, 0, 0, 0.6);
-}
-
-#navigation a {
-  text-decoration: none;
-  color: #ffffff;
-}
-
-#navigation ul {
-  display: flex;
-  gap: 18px;
-  flex-direction: row;
-  justify-content: center;
-  align-items: baseline;
-  list-style-type: none;
-  margin: 0px;
-  padding: 0px;
-  font-weight: bold;
-}
-
-#navigation a {
-  padding: 8px;
-  display: inline-block;
-  transition: background-color 0.25s ease-in-out;
-  border-radius: 4px;
-}
-
-#navigation a:hover,
-#navigation a:focus-visible {
-  outline: 1px solid rgba(255, 255, 255, 0.05);
-  background-color: rgba(255, 255, 255, 0.2);
-}
-
-#navigation img {
-  height: 1em;
-  object-fit: contain;
-}
-
-#navigation .icon-button a {
-  padding: 8px;
-}
-
-#navigation .icon-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-#navigation .icon-button img {
-  vertical-align: middle;
-}
-
-#navigation #menu-button {
-  display: none;
-}
-
-#navigation #install-button {
-  display: none;
-  background: linear-gradient(to right, #ad5389, #3c1053);
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-/* Breakpoints */
-
-@media (max-width: 512px) {
-  #navigation nav ul {
-    justify-content: space-between;
-  }
-
-  #navigation nav ul li {
-    display: none;
-  }
-
-  #navigation li#menu-button,
-  #navigation li#home-nav,
-  #navigation li#contact-nav {
-    display: inline-block;
-  }
-
-  /* Hide all buttons except home and menu */
-  /*#navigation nav ul li *:not(a.menu-button),
-  #navigation :not(a.home-button) {
-    display: none;
-  }*/
-
-  /* This should always be the same header image as the hero element */
-  #navigation.open {
-    padding: 0px;
-    /*background-color: rgba(59, 66, 82, 1);*/
-    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
-    url("/assets/images/hero_image2_mobile.jpg");
-    background-position: top left;
-    background-size: cover;
-    object-fit: cover;
-  }
-
-  #navigation.open nav ul {
-    padding: 12px;
-    -webkit-backdrop-filter: blur(4px);
-    backdrop-filter: blur(4px);
-  }
-
-  #navigation.open ul {
-    justify-content: space-between;
-    flex-direction: column;
-  }
-
-  #navigation.open nav ul li {
-    display: inline-block;
-  }
-}