:root {
    /* Colours */
    --clr-white: #FFF;
    --clr-white50: rgba(255,255,255,0.5);
    --clr-black25: rgba(0,0,0,0.25);
    --clr-accent: var(--clr-purpleDark);
    --clr-orangeDark: #ed6b06;
    --clr-orange: #f19044;
    --clr-orangeMedium: #f6b582;
    --clr-orangeLight: #fadac1;
    --clr-redDark: #ff3a3f;
    --clr-red: #ff6b6f;
    --clr-redMedium: #ff9d9f;
    --clr-redLight: #ffcecf;
    --clr-tealDark: #11998e;
    --clr-teal: #4db3aa;
    --clr-teal30: #CADEDC;
    --clr-tealMedium: #88ccc6;
    --clr-tealLight: #c4e6e3;
    --clr-pinkDark: #e60060;
    --clr-pink: #E04988;
    --clr-pinkMedium: #f78ab7;
    --clr-pinkLight: #FFDDEB;
    --clr-purpleDark: #3D128A;
    --clr-purple: #5D26C1;
    --clr-purpleMedium: #7B5BB6;
    --clr-purpleLight: #d6c9ef;
    --clr-mediumGrey: #CFCFCF;
    --clr-darkGrey: #777777;
    --clr-darkGreyText: #3D3D3D;
    --clr-0C416A: var(--clr-accent);
    /* Shadows */
    --shadow-light: 0px 2px 4px 0px rgba(0,0,0,0.25);
    --shadow-medium: 0px 2px 5px 0px rgba(0,0,0,0.35);
    --shadow-large: 0px 4px 6px 1px rgba(0,0,0,0.35);
    --shadow-inset: inset 0px 4px 4px 0px var(--clr-black25);
    --shadow-inset-light: inset 0px 4px 4px 0px rgba(0,0,0,0.15);
    --shadow-around-inside: -1px -1px 5px rgba(255, 255, 255, 0.6), 1px 1px 5px rgba(0, 0, 0, 0.3), inset -2px -2px 5px rgba(255, 255, 255, 1), inset 2px 2px 4px rgba(0, 0, 0, 0.3);
    /* Fonts */
    --sofia: 'sofia-pro', Arial, sans-serif;
    --current-font: var(--sofia);
}

* {
    transition-property: background, color;
    transition-duration: 0.3s;
}