scaffolding frontend common dom element

frontend/src/styles/main.css

@@ -1,8 +1,57 @@
+@import '@fontsource/titillium-web/400.css';
+@import '@fontsource/titillium-web/700.css'; /* per grassetto vero */
 @import "tailwindcss";
 @plugin "daisyui"; /* NOSONAR */
+@theme {
+  --font-sans: "Titillium Web", ui-sans-serif, system-ui, sans-serif;
+}
 
 :root{
   --dc-primary: rgb(34, 69, 138);
-  --dc-dark-blue: rgb(0, 15, 46);
   --dc-white: rgb(255, 255, 255);
+  --dc-dark-blue: rgb(0, 15, 46);
+  --dc-dark-gray: rgb(34, 34, 34);
+}
+
+body{
+  min-height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-base-200);
+}
+
+header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 70px;
+  padding: 5px 0 5px 10px;
+  color: var(--dc-white);
+  background-color: var(--dc-primary);
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  z-index: 1000;
+}
+
+#header-menu{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+}
+#header-menu a{
+  width:60px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+#main-container{
+  position:relative;
+  margin-top:70px;
+  flex:1;
 }