/*  ============= 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 }
img { width: 100%; height: auto }
@media (max-width: 767px ) { body { text-rendering: optimizeSpeed } }
@media (min-width: 768px ) { body { text-rendering: optimizeLegibility } }


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

:root {

    /* Alternatives to default sans-serif font */
    --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;

     /* Alternatives to default serif font */
    --font-serif: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;

     /* Alternatives to default monospace font */
    --font-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* Fluid font size scale */
    --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);

}

/*  ============== LAYOUT FOR CONTENT CONTAINERS ================= */

nav, header, section, footer { position: relative; display: block }
header, section, footer { margin-left: auto; margin-right: auto; overflow: hidden }
/* Under last content item, zero the bottom margin */
section > *:last-child { margin-bottom: 0 !important }

/*  ====================== HEADER ======================== */

/* Padding around content: laptops / desktops  */
@media (min-width: 768px) {
    header { 
        padding-top: 3%; 
        padding-right: 20%;
        padding-bottom: 0%;
        padding-left: 20%
    }
}
                        
/* Padding around content: mobiles */
@media (max-width: 767px) {
    header { 
        padding-top: 5%;
        padding-right: 5%;
        padding-bottom: 0%;
        padding-left: 5%
    }
}

/*  ====================== SECTIONS ======================== */

/* Padding around content: laptops / desktops */
@media (min-width: 768px) {
    section { 
        padding-top: 4%;
        padding-right: 20%;
        padding-bottom: 4%;
        padding-left: 20%
    }
}
                        
/* Padding around content: mobiles */
@media (max-width: 767px) {
    section { 
        padding-left: 5%;
        padding-right: 5%;
        padding-bottom: 5%;
        padding-left: 5%
    }
}

/* Maximum width of any section */
section { max-width: 1920px }
/* Maximum width for contents of any section */
section > * { max-width: 1600px }

/* When content width < viewport width, equalise spacing at left and right */
section > * { max-width: 1600px; margin-left: auto; margin-right: auto }

/* ============= TYPOGRAPHY ============ */

h1 {
    font-size: var(--fs-xxxl);
    line-height: 1.2;
}

h2 {
    font-size: var(--fs-xl);
    line-height: 1.2;
    margin-top: 42px;
    margin-bottom: 16px;
}

h3 {
    font-size: var(--fs-lg);
    margin-top: 48px; 
    margin-bottom: 4px;
    line-height: 1.2;
}

p {
	font-size: var(--fs-base);
    line-height: 1.7;
	margin-bottom: 12px;
}