Created some base components

flightscore/src/components/footer-bar.ts

@@ -1,11 +1,55 @@
-import { LitElement, html, css, unsafeCSS } from 'lit';
+import { LitElement, html, css } from 'lit';
 import { customElement } from 'lit/decorators.js';
-import styles from './footer-bar.css?inline';
 import './ui-link';
 
 @customElement('footer-bar')
 export class FooterBar extends LitElement {
-    static styles = css`${unsafeCSS(styles)}`;
+    static styles = css`
+    footer {
+  background: var(--color-bg-nav);
+  border-top: 1px solid var(--color-border);
+  color: var(--color-text);
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 0.8rem 0;
+  font-size: 0.9rem;
+  flex-wrap: wrap;
+  backdrop-filter: blur(10px);
+  position: relative;
+  width: 100%;
+}
+
+a {
+  color: var(--color-text);
+  text-decoration: none;
+  margin-left: 1.2rem;
+  font-weight: 500;
+}
+
+a:hover {
+  color: var(--color-accent);
+}
+
+.center {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 1rem;
+}
+
+@media (max-width: 600px) {
+  footer {
+    flex-direction: column;
+    gap: 0.6rem;
+    text-align: center;
+  }
+
+  a {
+    margin: 0;
+  }
+}
+`;
 
   render() {
     const year = new Date().getFullYear();