/* here are the base css common across all HTMLS */
/* Please use calibri then ariel for all fonts */
/* body {
    font-family: 'Calibri', 'Arial', sans-serif;
    font-size: 18px;
    word-break: break-word;
}
h1{
    font-size: 34px;
    font-weight: bold;
}
h2{
    font-size: 32px;
    font-weight: bold;
}
h3{
    font-size: 30px;
    font-weight: bold;
}
h4{
    font-size: 24px;
}
h5{
    font-size: 20px;
}
h6{
    font-size: 18px;
}*/
:root {
  --orange: #EC6726;
  --grey: #EEEEEE;
  --black: #322C33;
  --white: #FFFFFF;
  --step--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
  /* --step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem); */
  --step-0: clamp(0.375rem, 1.0739rem + 0.2273vw, 3.75rem);
  --step-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
  --step-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
  --step-3: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
  --step-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
  --step-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);
}
html {
    font-size: 100%;
}
/* its better to use rem instead of vw for font sizing as vw can potentially cause issues with zooming etc..  */
body {
    font-family: 'Calibri', 'Arial', sans-serif;
    /* font-size: clamp(12px, 0.5469rem + 0.5vw, 24px); */
    font-size: clamp(10px, 0.973vw, 24px);
    /* 18px is default, scales between 14px and 22px */
    /* font-size: clamp(10px, 18px, 24px); */
    /* font-size: clamp(0.625rem, 1.125rem, 1.5rem); */
    /* font-size: var(--step-0); */
    word-break: break-word;
    font-style: normal;
    color: #322C33;
}
/* @media {
    @media (max-width: 768px) {
        body {
            font-size: clamp(12px, 1.5vw, 18px);
        }
    }
} */
/* Headings: middle value is default size, min/max for scaling */
h1 { font-size: clamp(24px, 1.838vw, 40px); font-weight: bold; }
h2 { font-size: clamp(22px, 1.73vw, 36px); font-weight: bold; }
h3 { font-size: clamp(20px, 1.622vw, 34px); font-weight: bold; }
h4 { font-size: clamp(16px, 1.298vw, 30px); }
h5 { font-size: clamp(12px, 1.083vw, 26px); }
h6 { font-size: clamp(10px, 0.973vw, 24px); }
/* h1 { font-size: clamp(24px, 34px, 40px); font-weight: bold; }
h2 { font-size: clamp(22px, 32px, 36px); font-weight: bold; }
h3 { font-size: clamp(20px, 30px, 34px); font-weight: bold; }
h4 { font-size: clamp(16px, 24px, 30px); }
h5 { font-size: clamp(12px, 20px, 26px); }
h6 { font-size: clamp(10px, 18px, 24px); } */
/* h1 { font-size: var(--step-5); font-weight: bold; }
h2 { font-size: var(--step-4); font-weight: bold; }
h3 { font-size: var(--step-3); font-weight: bold; }
h4 { font-size: var(--step-2); }
h5 { font-size: var(--step-1); }
h6 { font-size: var(--step-0); } */
ul.errorlist {
    color: red;
    margin: 0 0 10px 0;
    padding-left: 0;
    list-style: none;
    font-weight: bold;
}

ul.errorlist li {
    margin-left: 0;
    padding-left: 0;
}

.user-error {
    color: red;
    font-weight: bold;
    margin-bottom: 10px;
}
.error {
    color: red;
    font-weight: bold;
    margin-bottom: 10px;
}

.logo {
    color: var(--grey);
}
/* colour variables to be used throughout the CSS */