:root {
    /* --blue: #2d62c5;
    --blue_hover: #173875;
    --red: #c52d2d;
    --red_hover: #781717;
    --green: #158633;
    --orange: #cf771e;
    --blue-grey: #c2d3f3;
    --grey: #414856;
    --grey_hover: #4f5560;
    --darker: rgb(0, 0, 0);
    --dark: rgb(0, 0, 0);
    --white: #e7f0fe;
    --black: #000000;
    --darkest: #16171a;
    --dark-grey: #2f333d;
    --dark-grey_hover: #24272f;
    --border-radius: 6px;
    --light: #667086; */

    --fullBlack: #000000;
    --white: #FBFCFD;
	--black: #080A0B;
	--darkest: #11151A;
	--dark: #1A2029;
	--darkgrey: #262F38;
	--grey: #798697;
	--lightgrey: #D3DAE3;
	--green: #00B663;
	--red: #F01731;
	--blue: #2271FF;
	--yellow: #FFF621;
    --orange: #ffc421;

	--white_hover: hsl(210, 33%, 100%);
	--black_hover: hsl(200, 16%, 14%);
	--darkest_hover: hsl(213, 21%, 18%);
	--dark_hover: hsl(216, 22%, 23%);
	--darkgrey_hover: hsl(210, 19%, 28%);
	--grey_hover: hsl(214, 13%, 63%);
	--lightgrey_hover: hsl(214, 22%, 96%);
	--green_hover: hsl(153, 100%, 46%);
	--red_hover: hsl(353, 88%, 62%);
	--blue_hover: hsl(219, 100%, 67%);
	--yellow_hover: hsl(58, 100%, 66%);

	--border-radius: 6px;
}

@font-face {
    font-family: 'Hauora';
    src: url('../fonts/Hauora-ExtraLight.woff') format('woff2');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Hauora';
    src: url('../fonts/Hauora-Light.woff') format('woff2');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Hauora';
    src: url('../fonts/Hauora-Regular.woff') format('woff2');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Hauora';
    src: url('../fonts/Hauora-Medium.woff') format('woff2');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Hauora';
    src: url('../fonts/Hauora-SemiBold.woff') format('woff2');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'Hauora';
    src: url('../fonts/Hauora-Bold.woff') format('woff2');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'Hauora';
    src: url('../fonts/Hauora-ExtraBold.woff') format('woff2');
    font-weight: 900;
    font-style: normal;
}

html {
    height: -webkit-fill-available;
}

body {
    background: var(--black);
    color: var(--white);
    font-family: 'Hauora', sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 22px;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
    height: 100%;
}

/* helper */
.text-center { text-align: center }

/* Pointer */
.pointer {
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    mix-blend-mode: difference;
    background-color: var(--white);
    transition: opacity .3s,color .4s;
    transition: opacity 0.2s, transform 0.1s, width 0.5s, height 0.5s;
}

.c-300 { font-size: xx-large; font-weight: 300 }
.c-400 { font-size: xx-large; font-weight: 400 }
.c-500 { font-size: xx-large; font-weight: 500 }
.c-600 { font-size: xx-large; font-weight: 600 }
.c-700 { font-size: xx-large; font-weight: 700 }
.c-800 { font-size: xx-large; font-weight: 800 }
.c-900 { font-size: xx-large; font-weight: 900 }