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

:root {
    /* Nicer than default sans-serif font */
    --sans-serif: -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;

    /* Color variables */
    --black-000: #000;
    --white-000: #fff;

    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;

    --blue-100: #cfe2ff;
    --blue-200: #9ec5fe;
    --blue-300: #6ea8fe;
    --blue-400: #3d8bfd;
    --blue-500: #0d6efd;
    --blue-600: #0a58ca;
    --blue-700: #084298;
    --blue-800: #052c65;
    --blue-900: #031633;

    --indigo-100: #e0cffc;
    --indigo-200: #c29ffa;
    --indigo-300: #a370f7;
    --indigo-400: #8540f5;
    --indigo-500: #6610f2;
    --indigo-600: #520dc2;
    --indigo-700: #3d0a91;
    --indigo-800: #290661;
    --indigo-900: #140330;

    --purple-100: #e2d9f3;
    --purple-200: #c5b3e6;
    --purple-300: #a98eda;
    --purple-400: #8c68cd;
    --purple-500: #6f42c1;
    --purple-600: #59359a;
    --purple-700: #432874;
    --purple-800: #2c1a4d;
    --purple-900: #160d27;

    --pink-100: #f7d6e6;
    --pink-200: #efadce;
    --pink-300: #e685b5;
    --pink-400: #de5c9d;
    --pink-500: #d63384;
    --pink-600: #ab296a;
    --pink-700: #801f4f;
    --pink-800: #561435;
    --pink-900: #2b0a1a;

    --red-100: #f8d7da;
    --red-200: #f1aeb5;
    --red-300: #ea868f;
    --red-400: #e35d6a;
    --red-500: #dc3545;
    --red-600: #b02a37;
    --red-700: #842029;
    --red-800: #58151c;
    --red-900: #2c0b0e;

    --orange-100: #ffe5d0;
    --orange-200: #fecba1;
    --orange-300: #feb272;
    --orange-400: #fd9843;
    --orange-500: #fd7e14;
    --orange-600: #ca6510;
    --orange-700: #984c0c;
    --orange-800: #653208;
    --orange-900: #331904;

    --yellow-100: #fff3cd;
    --yellow-200: #ffe69c;
    --yellow-300: #ffda6a;
    --yellow-400: #ffcd39;
    --yellow-500: #ffc107;
    --yellow-600: #cc9a06;
    --yellow-700: #997404;
    --yellow-800: #664d03;
    --yellow-900: #332701;

    --green-100: #d1e7dd;
    --green-200: #a3cfbb;
    --green-300: #75b798;
    --green-400: #479f76;
    --green-500: #198754;
    --green-600: #146c43;
    --green-700: #0f5132;
    --green-800: #0a3622;
    --green-900: #051b11;

    --teal-100: #d2f4ea;
    --teal-200: #a6e9d5;
    --teal-300: #79dfc1;
    --teal-400: #4dd4ac;
    --teal-500: #20c997;
    --teal-600: #1aa179;
    --teal-700: #13795b;
    --teal-800: #0d503c;
    --teal-900: #06281e;

    --cyan-100: #cff4fc;
    --cyan-200: #9eeaf9;
    --cyan-300: #6edff6;
    --cyan-400: #3dd5f3;
    --cyan-500: #0dcaf0;
    --cyan-600: #0aa2c0;
    --cyan-700: #087990;
    --cyan-800: #055160;
    --cyan-900: #032830;

    --ontrend-100: #fff4d9;
    --ontrend-200: #fdd0bb;
    --ontrend-300: #fea8b3;
    --ontrend-400: #7dcfe7;
    --ontrend-500: #0b6655;
    --ontrend-600: #400c3e;
    --ontrend-700: #2c4763;
    --ontrend-800: #1f364d;
    --ontrend-900: #0e2439;

    --global-font: var(--sans-serif);
    --drop-shadow: var(--gray-500);
    --img-border: var(--gray-700);
}

/* Global font */
body {font-family: 'Neucha', cursive;}

.theme-one p { color: var(--purple-500) }
.theme-one li { color: var(--purple-500) }

.theme-two { background-color: var(--pink-200) }
.theme-two .col-2 h2 { color: var(--red-500) }

.theme-three .col-2 h2 { color: var(--red-500) }
.theme-three { background-color: var(--green-100) }

.theme-four { background-color: var(--indigo-400) }
.theme-four .col-2 h2 { color: var(--white-000) }
.theme-four .col-2 p { color: var(--white-000) }
.theme-four .col-2 li { color: var(--white-000) }

.theme-five { background-color: var(--yellow-100) }
.theme-five .col-2 h2 { color: var(--red-500) }

section > p.standfirst {
    font-size: calc(24px + (36 - 24) * ((100vw - 320px) / (1600 - 320)));       
}

.hero-block h1 {
    font-size: calc(60px + (132 - 60) * ((100vw - 320px)/ (1600 - 320)));  
    margin-bottom: 40px;
    letter-spacing: 2px;
}
                        
.hero-block h2 {
    font-size: calc(32px + (64 - 32) * ((100vw - 320px)/ (1600 - 320)));  
    letter-spacing: 1px;
}
                        
.cols-2-split .col-2 h2 {
    font-size: calc(32px + (58 - 32) * ((100vw - 320px) / (1600 - 320)));  
    letter-spacing: 2px;
}
                        
.cols-2-split .col-2 p {
    font-size: calc(16px + (24 - 16) * ((100vw - 320px) / (1600 - 320)));  
    letter-spacing: 1px;
    line-height: 1.6;
}