1 files changed, 66 insertions, 0 deletions
diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css
index e69de29..0bcd658 100644
--- a/ufund-ui/src/app/app.component.css
+++ b/ufund-ui/src/app/app.component.css
@@ -0,0 +1,66 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+#header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    /*border-bottom: light-dark(#d3d3d3, black) solid 1px;*/
+    padding: 15px 20px;
+    /*background-color: light-dark(#f5f5f5, #2e2e2e);*/
+    z-index: 2;
+
+    h1 {
+        padding: 0;
+        margin: 0;
+        font-weight: 500;
+        /*text-decoration: none;*/
+        text-transform: uppercase;
+        font-size: 16pt;
+        letter-spacing: .5px;
+    }
+
+    div {
+        display: flex;
+        align-items: center;
+        gap: 20px;
+    }
+
+    /*div:has(a:hover) a {*/
+    /*    color: light-dark(black, rgba(255, 255, 255, 0.5));*/
+    /*}*/
+
+    a {
+        color: light-dark(black, white);
+        text-decoration: none;
+    }
+
+    a {
+        display: block;
+        position: relative;
+        padding: 0.1em 0;
+    }
+
+    a::after {
+        content: '';
+        position: absolute;
+        bottom: 4px;
+        left: 0;
+        width: 100%;
+        height: 0.03em;
+        background-color: white;
+        opacity: 0;
+        transition: opacity 300ms, transform 300ms;
+    }
+
+    a:hover::after,
+    a:focus::after {
+        opacity: 1;
+        transform: translate3d(0, 0.2em, 0);
+    }
+
+
+}