: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-purple);
    --clr-tealDark: #11998e;
    --clr-teal: #68AFA8;
    --clr-teal30: #CADEDC;
    --clr-tealLight: #c4e6e3;
    --clr-pinkDark: #e60060;
    --clr-purpleDark: #ff7d7d;
    --clr-purple: #f59492;
    --clr-purpleMedium: #ff7d7d;
    --clr-purpleLight: #fbc7c2;
    --clr-mediumGrey: #CFCFCF;
    --clr-darkGrey: #777777;
    --clr-darkGreyText: #373433;
    --clr-0C416A: #ff7d7d;
    /* 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;
}