desktop header design improvements

tailwind.config.js

@@ -9,6 +9,21 @@ module.exports = {
   },
   darkMode: false,
   theme: {
+    fontSize: {
+        'xs': '.75rem',
+        'sm': '.875rem',
+        'tiny': '.875rem',
+        'base': '1rem',
+        'md': '1.05rem',
+        'lg': '1.125rem',
+        'xl': '1.25rem',
+        '2xl': '1.5rem',
+        '3xl': '1.875rem',
+        '4xl': '2.25rem',
+        '5xl': '3rem',
+        '6xl': '4rem',
+        '7xl': '5rem',
+    },
     colors: {
       transparent: 'transparent',
       white: '#ffffff',
@@ -16,8 +31,10 @@ module.exports = {
       gray: colors.gray,
       slate: colors.slate,
       stone: colors.stone,
+      zinc: colors.zinc,
       yellow: colors.yellow,
       orange: colors.orange,
+      sky: colors.sky,
       blue: {
         '100': '#bbeeff',
         '200': '#00aaff',