html,
:root {
    --colour-navy:  #233764;
    --colour-yellow: #FFC000;
    --colour-cyan: #00ADEF;
    --colour-green: #0f9347;
    --colour-offwhite: #f6f6f6;
    --colour-white: #ffffff;
    --colour-offblack: #191919;
    --colour-black: #000000;

    --theme-colour-primary: hsla(222, 48%, 26%, 1);
    --theme-colour-primary-contrast: var(--colour-white);
    --theme-colour-primary-light: hsla(222, 48%, 28%, 1);
    --theme-colour-primary-dark: hsla(222, 48%, 24%, 1);
    --theme-colour-primary-translucent: hsla(222, 48%, 26%, 0.25);

    --theme-colour-secondary: hsla(196.55, 100%, 34%, 1); /* #007eae; /* darkened theme cyan to be acceptable contrast on white backgrounds*/
    --theme-colour-secondary-contrast: var(--colour-white);
    --theme-colour-secondary-light: hsla(196.55, 100%, 36%, 1);
    --theme-colour-secondary-dark: hsla(196.55, 100%, 32%, 1);
    --theme-colour-secondary-translucent:hsla(196.55, 100%, 34%, 0.25);

    --theme-colour-box-shadow-weak: rgba(0,0,0,0.2);
    --theme-colour-box-shadow-strong: rgba(0,0,0,0.3);

    --colour-pending: #ffc758;
    --colour-success: #3a8a3f;
    --colour-failure: #b33939;

    --border-radius: 10px;
    --box-shadow-weak: 2px 2px 3px 2px var(--theme-colour-box-shadow-weak);
    --box-shadow-strong: 2px 2px 8px 2px var(--theme-colour-box-shadow-strong);
    --spacing: 15px;
    --transition-duration: 0.3s;

    --breakpoint-m: 600px;
    --breakpoint-l: 1024px;
    --breakpoint-xl: 1500px;
    --max-width: 1500px;
}

html {
    box-sizing: border-box;
    font-size: 1rem; /* 16px */
}
*, *:before, *:after {
    box-sizing: inherit;
}
* {
    font-family: "Libre Franklin", Lato, Roboto, sans-serif;
    font-feature-settings: normal;
    font-variation-settings: normal;
    text-decoration: none;
    letter-spacing: 0;
}

.btn {
    background-color: var(--colour-primary);
    color: white;
    transition: background-color var(--transition-duration) ease;
    cursor: pointer;
    &:hover {
        /*background-color: var(--colour-primary-darker);*/
        filter: brightness(85%);
    }
}