/*  ============= WEB BROWSER RESETS ============ */
* { margin: 0; padding: 0; border: none }
*, *::before, *::after { box-sizing: border-box }
html { height: 100%; font-size: 100%; font: inherit; vertical-align: baseline;
scroll-behavior: smooth; scroll-padding-top: 20px }
body { line-height: 1.5; min-height: 100vh; 
margin-left: auto; margin-right: auto; min-height: 100vh }  
@media (max-width: 767px ) { body { text-rendering: optimizeSpeed } }
@media (min-width: 768px ) { body { text-rendering: optimizeLegibility } }
nav, header, section, footer { width: 100% }
nav *:last-child, header *:last-child, section *:last-child, footer *:last-child { margin-bottom: 0 }
img { width: 100%; height: auto; display: block }
input, button, textarea, select { font: inherit }
h1, h2, h3, h4, p, li { word-break: break-word; hyphens: auto }

/* ============ CUSTOM PROPERTIES ============  */

:root {
    /* ==== Color variables ==== */
    --black-000: #000000;
    --white-000: #ffffff;
    --trans-000: transparent;

    --slate-050: #ECEFF1;
    --slate-100: #CFD8DC;
    --slate-200: #B0BEC5;
    --slate-300: #90A4AE;
    --slate-400: #78909C;
    --slate-500: #607D8B;
    --slate-600: #546E7A;
    --slate-700: #455A64;
    --slate-800: #37474F;
    --slate-900: #263238;

    --gray-050: #F9FAFB;
    --gray-100: #f7fafc;
    --gray-200: #edf2f7;
    --gray-300: #e2e8f0;
    --gray-400: #cbd5e0;
    --gray-500: #a0aec0;
    --gray-600: #718096;
    --gray-700: #4a5568;
    --gray-800: #2d3748;
    --gray-900: #1a202c;

    --red-050: #FEF2F2;
    --red-100: #fff5f5;
    --red-200: #fed7d7;
    --red-300: #feb2b2;
    --red-400: #fc8181;
    --red-500: #f56565;
    --red-600: #e53e3e;
    --red-700: #c53030;
    --red-800: #9b2c2c;
    --red-900: #742a2a;

    --orange-050: #FFF7ED;
    --orange-100: #fffaf0;
    --orange-200: #feebc8;
    --orange-300: #fbd38d;
    --orange-400: #f6ad55;
    --orange-500: #ed8936;
    --orange-600: #dd6b20;
    --orange-700: #c05621;
    --orange-800: #9c4221;
    --orange-900: #7b341e;

    --amber-050: #FFFBEB;
    --amber-100: #FEF3C7;
    --amber-200: #FDE68A;
    --amber-300: #FCD34D;
    --amber-400: #FBBF24;
    --amber-500: #F59E0B;
    --amber-600: #D97706;
    --amber-700: #B45309;
    --amber-800: #92400E;
    --amber-900: #78350F;

    --yellow-050: #FEFCE8;
    --yellow-100: #fffff0;
    --yellow-200: #fefcbf;
    --yellow-300: #faf089;
    --yellow-400: #f6e05e;
    --yellow-500: #ecc94b;
    --yellow-600: #d69e2e;
    --yellow-700: #b7791f;
    --yellow-800: #975a16;
    --yellow-900: #744210;

    --lime-050: #F7FEE7;
    --lime-100: #ECFCCB;
    --lime-200: #D9F99D;
    --lime-300: #BEF264;
    --lime-400: #A3E635;
    --lime-500: #84CC16;
    --lime-600: #65A30D;
    --lime-700: #4D7C0F;
    --lime-800: #3F6212;
    --lime-900: #365314;

    --green-050: #F0FDF4;
    --green-100: #f0fff4;
    --green-200: #c6f6d5;
    --green-300: #9ae6b4;
    --green-400: #14f195;
    --green-500: #48bb78;
    --green-600: #38a169;
    --green-700: #2f855a;
    --green-800: #276749;
    --green-900: #22543d;

    --teal-050: #F0FDFA;
    --teal-100: #CCFBF1;
    --teal-200: #99F6E4;
    --teal-300: #5EEAD4;
    --teal-400: #2DD4BF;
    --teal-500: #14B8A6;
    --teal-600: #0D9488;
    --teal-700: #0F766E;
    --teal-800: #115E59;
    --teal-900: #134E4A;

    --cyan-050: #ECFEFF;
    --cyan-100: #CFFAFE;
    --cyan-200: #A5F3FC;
    --cyan-300: #67E8F9;
    --cyan-400: #22D3EE;
    --cyan-500: #06B6D4;
    --cyan-600: #0891B2;
    --cyan-700: #0E7490;
    --cyan-800: #155E75;
    --cyan-900: #164E63;

    --sky-050: #F0F9FF;
    --sky-100: #E0F2FE;
    --sky-200: #BAE6FD;
    --sky-300: #7DD3FC;
    --sky-400: #38BDF8;
    --sky-500: #0EA5E9;
    --sky-600: #0284C7;
    --sky-700: #0369A1;
    --sky-800: #075985;
    --sky-900: #0C4A6E;

    --blue-050: #EFF6FF;
    --blue-100: #DBEAFE;
    --blue-200: #BFDBFE;
    --blue-300: #93C5FD;
    --blue-400: #60A5FA;
    --blue-500: #3B82F6;
    --blue-600: #2563EB;
    --blue-700: #1D4ED8;
    --blue-800: #1E40AF;
    --blue-900: #1E3A8A;

    --indigo-050: #EEF2FF;
    --indigo-100: #E0E7FF;
    --indigo-200: #C7D2FE;
    --indigo-300: #A5B4FC;
    --indigo-400: #818CF8;
    --indigo-500: #6366F1;
    --indigo-600: #4F46E5;
    --indigo-700: #4338CA;
    --indigo-800: #3730A3;
    --indigo-900: #312E81;

    --purple-050: #FAF5FF;
    --purple-100: #F3E8FF;
    --purple-200: #E9D5FF;
    --purple-300: #D8B4FE;
    --purple-400: #C084FC;
    --purple-500: #A855F7;
    --purple-600: #9333EA;
    --purple-700: #7E22CE;
    --purple-800: #6B21A8;
    --purple-900: #581C87;

    --fuchsia-050: #FDF4FF;
    --fuchsia-100: #FAE8FF;
    --fuchsia-200: #F5D0FE;
    --fuchsia-300: #F0ABFC;
    --fuchsia-400: #E879F9;
    --fuchsia-500: #D946EF;
    --fuchsia-600: #C026D3;
    --fuchsia-700: #A21CAF;
    --fuchsia-800: #86198F;
    --fuchsia-900: #701A75;

    --pink-050: #FDF2F8;
    --pink-100: #FCE7F3;
    --pink-200: #FBCFE8;
    --pink-300: #F9A8D4;
    --pink-400: #F472B6;
    --pink-500: #EC4899;
    --pink-600: #DB2777;
    --pink-700: #BE185D;
    --pink-800: #9D174D;
    --pink-900: #831843;

    --rose-050: #FFF1F2;
    --rose-100: #FFE4E6;
    --rose-200: #FECDD3;
    --rose-300: #FDA4AF;
    --rose-400: #FB7185;
    --rose-500: #F43F5E;
    --rose-600: #E11D48;
    --rose-700: #BE123C;
    --rose-800: #9F1239;
    --rose-900: #881337;

    --brown-050: #EFEBE9;
    --brown-100: #D7CCC8;
    --brown-200: #BCAAA4;
    --brown-300: #A1887F;
    --brown-400: #8D6E63;
    --brown-500: #795548;
    --brown-600: #6D4C41;
    --brown-700: #5D4037;
    --brown-800: #4E342E;
    --brown-900: #3E2723;

    --trend-050: #fff4d9;
    --trend-100: #fdd0bb;
    --trend-200: #fea8b3;
    --trend-300: #d4eee6;
    --trend-400: #bde5fe;
    --trend-500: #0000fe;
    --trend-600: #400c3e;
    --trend-700: #2c4763;
    --trend-800: #1f364d;
    --trend-900: #0e2439;

    /* ==== Nicer than browser default fonts ==== */
    --font-sans: -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Fira Sans, Ubuntu, Oxygen, Oxygen Sans, Cantarell, Droid Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Emoji, Segoe UI Symbol, Lucida Grande, Helvetica, Arial, sans-serif;
    --font-serif: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
    --font-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    
    --global-font: var(--font-sans);

    /* ==== Fluid font sizes ==== */
    --fs-sm: clamp(0.8rem, 0.17vi + 0.76rem, 0.89rem);
    --fs-base: clamp(1rem, 0.34vi + 0.91rem, 1.19rem);
    --fs-md: clamp(1.25rem, 0.61vi + 1.1rem, 1.58rem);
    --fs-lg: clamp(1.56rem, 1vi + 1.31rem, 2.11rem);
    --fs-xl: clamp(1.95rem, 1.56vi + 1.56rem, 2.81rem);
    --fs-xxl: clamp(2.44rem, 2.38vi + 1.85rem, 3.75rem);
    --fs-xxxl: clamp(3.05rem, 3.54vi + 2.17rem, 5rem);

}

/* Global font */
body { font-family: var(--global-font); }


/* ============= CSS FOR HERO BLOCK ============= */

header {
    /* Flexbox to centre child div vertically */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Spacing around child div inside hero block */
    padding: 0 20% 4% 20%;
    /* Optionally, centre child div horizontally */
    text-align: center;
    /* Background colour */
    background-color: gray;
}

/* Set minimum height of hero block */
@media (min-width: 768px) { 
    header { min-height: 80vh } 
}
@media (max-width: 767px) { 
    header { min-height: 500px } 
}

.hero-text-container h1, 
.hero-text-container h2 {
    line-height: 1.2;
    color:#fff;
}

.hero-text-container h1 {
    /* Space under h1 and above h2 */
    margin-bottom: 24px;
    /* Set main heading to extra large size */
    font-size: calc(var(--fs-xxxl) * 1.5);
    /* When text extra large, decrease spacing between characters  */
    letter-spacing: -4px;
}

.hero-text-container h2 {
    /* Optionally, remove default weight of 'bold' from h2 */
    font-weight: normal;
    font-size: var(--fs-xl);
    /* Optionally, change text in h2 to all capital letters */
    text-transform: uppercase;
}

/* ======== END CSS FOR HERO BLOCK ======== */