diff --git a/the_works/static/the_works.css b/the_works/static/the_works.css
index f861351..64b90bb 100644
--- a/the_works/static/the_works.css
+++ b/the_works/static/the_works.css
@@ -1,3 +1,34 @@
+@charset "UTF-8";
+
+/* add nice gradient to the header*/ 
+body>header {
+  background-image: linear-gradient(to right, rgba(255, 239, 186, .7), var(--pico-background-color));
+}
+
+[data-theme=light],
+:root:not([data-theme=dark]),
+:host(:not([data-theme=dark])) {
+  /* adapt the header gradient for dark mode */  
+  body>header {
+    background-image: linear-gradient(to right, #ffefba, var(--pico-background-color));
+  }
+}
+
+@media only screen and (prefers-color-scheme: dark) {
+  :root:not([data-theme]),
+  :host(:not([data-theme])) {
+  }
+}
+
+
+/* on smaller screens, give the main menu dropdown an absolute position so it stretches over the content instead of pushing the content down */    
+@media (max-width: 767px) {
+  ul#navbar {
+    position: absolute;
+    top: 50px    
+  }
+}
+
 nav {
   a {
     --pico-text-decoration: none;