/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

:root {

    --yellow: #ffc665;
    --midnight-blue: #1a1048;
    --midnight-blue: #10064f;
    --midnight-blue: #101748;
    --violet: #4d46af;
    --violet: #4652af;
    /* --violet: #4661af; */
    --blue: #3d5a80;
    --light-blue: #7fa3e0;
    --dark-blue: #293241;

    --primary-color:#4661af;
    --secondary-color: #ffc665;
    --link-color: #7fa3e0;
    --link-hover: #4661af;
    /* --link-hover: #3d5a80; */

    --gray-light: #f9f9f9;
    --gray-semilight: #bcbcce;
    --gray: #939393;
    --gray-semidark: #7e7e7e;
    --gray-dark: #444;
    --white: #fff;
    --black: #000;
    --black: #040112;
    --black: #030112;

    --opacity-text: rgba(255, 255, 255, .75);
    --opacity-dark: rgba(0, 0, 0, .25);
   
}