@charset "UTF-8";

/***************************/
/***************************/
/********** FONTS **********/
/***************************/
/***************************/

/****************************/
/********** FAMILY **********/
/****************************/

/**
google fonts                                          
**/

:root {
	--font-family: 'Poppins', sans-serif;
	--font-family-manuscript: 'EB Garamond', serif;
	--font-weight-normal: 300;
	--font-weight-medium: 600;
	--font-weight-bold: 900;
}

/********************************/
/********** FONT SIZES **********/
/********************************/

:root {
	--font-size: 1rem;
}

/*************************************/
/********** CONTENT SPACING **********/
/*************************************/

@media (min-width:0px) {
	:root {
		--global-spacing: 1rem;
	}
}
@media (min-width:760px) {
	:root {
		--global-spacing: 2rem;
	}
}

/************************/
/************************/
/********** UI **********/
/************************/
/************************/

/**************************/
/********** LOGO **********/
/**************************/


/*********************************/
/*********************************/
/********** NAVIGATIONS **********/
/*********************************/
/*********************************/

:root {
	--nav-gap: 1em;
	--button-font-size: .75rem;
	--button-radius: 0;
}

@media (min-width: 0px) {
	:root {
		--primary-font-size: 1.25em;
		--logo-height: calc(var(--font-size) * 4);
	}
}
@media (min-width: 760px) {
	:root {
		--logo-height: calc(var(--font-size) * 8);
	}
}
@media (min-width: 1000px) {
	:root {
		--primary-font-size: .875em;
		--logo-height: calc(var(--font-size) * 6);
	}
}
@media (min-width: 1400px) {
	:root {
		--primary-font-size: 1.25rem;
		--logo-height: calc(var(--font-size) * 8);
	}
}



/****************************/
/********** COLORS **********/
/****************************/

/* --secondary-color, $tertiary-color : from theme options; */

body {
	--dark-rgb: 0,0,0;
	--grey-rgb: 89,89,84;
	--light-rgb: 247,247,245;
	--bright-rgb: 255,255,255;
	/*
	--primary-rgb:0,150,255;
	--secondary-rgb: 0,178,61;
	--tertiary-rgb: 236,255,67;
	*/
	--dark-color: rgb(var(--dark-rgb));
	--grey-color: rgb(var(--grey-rgb));
	--light-color: rgb(var(--light-rgb));
	--bright-color: rgb(var(--bright-rgb));
	/*
	--primary-color:rgb(var(--primary-rgb));
	--secondary-color: rgb(var(--secondary-rgb));
	--tertiary-color: rgb(var(--tertiary-rgb));
	*/
}

/****************************************/
/********** VIEWPORT 100VH FIX **********/
/****************************************/

/** default **/

body {
	--viewport-height: 100vh;
}

/** introduced **/

body.introduced {
	--viewport-height: -webkit-calc(100vh - var(--footer-height));
	--viewport-height: -moz-calc(100vh - var(--footer-height));
	--viewport-height: calc(100vh - var(--footer-height));
}

/** touch device only **/

@media (pointer:coarse) {
	body {
		--viewport-height: 90vh; /* js rectified */
	}
}

/*******************************/
/********** STRUCTURE **********/
/*******************************/

/********** CUSTOM **********/

body {
	--content-maxwidth: 86rem; /* 20rem * 4 + 3 * 2rem */
	--short-content-maxwidth: 62.5rem;
	--line-height: .125rem;	
}

/********** GRID / SECTIONS **********/

@media (min-width: 0px) {
	body {
		--gutter-gap: 1.5rem;
	}
}
@media (min-width: 760px) {
	body {
		--gutter-gap: 2rem;
	}
}
@media (min-width: 1200px) {
	body {
		--gutter-gap: 3rem;
	}
}

/********** HEIGHTS **********/

@media (min-width: 0px) {
	body {
		--header-height: var(--logo-height);
		--footer-height: calc(var(--font-size) * 4 * .625);
		--contextual-height: calc(var(--font-size) * 3);
	}
}
@media (min-width: 760px) {
	body {
		--header-height: calc(var(--logo-height) + var(--font-size) * 2);
	}
}