:root{
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-family: var(--font-family);
    font-weight: 400;

    --font-family: 'Khand', sans-serif;

    /* Branding colours */
    --colour-brand-1: #33AABF;
    --colour-brand-2: #1D3255;
    --colour-brand-3: #F4AA38;
    /* Main colour for headings and menus */
    --colour-font-1: var(--colour-brand-3); 
    --colour-bg-1: var(--colour-brand-2);
    /*For selecting items in the first colour*/
    --colour-font-1-select: #777777; 
    --colour-bg-1-select: white;
    /* Colour for content */
    --colour-font-2: black;
    --colour-bg-2: white;
    --colour-font-2-select: #777777;
    --colour-bg-2-select: white;
    /* Colour for content */
    --colour-font-3: var(--colour-brand-1);
    --colour-bg-3: white;
    --colour-font-3-select: black;
    --colour-bg-3-select: #777777;
    /*Action colours*/
    --colour-action-positive-font: black;
    --colour-action-positive-bg: #558822;
    --colour-action-negative-font: black;
    --colour-action-negative-bg: #fc3003;
    /* Body colour*/
    --colour-body: white;
    /* Push our main coolours out to all components */
    color: var(--colour-font-2);
    background: var(--colour-bg-2);
    scrollbar-color: var(--colour-font-1) var(--colour-bg-1);

    --drawer-width: 12em;
}

body::-webkit-scrollbar{
    width: 1rem;
}
body::-webkit-scrollbar-track{
    background: var(--colour-bg-1);
}
body::-webkit-scrollbar-thumb{
    background: var(--colour-font-1);
}

body{
    margin: 0;
    padding: 0;
    background: var(--colour-body);
}