/* BEGIN: COMMON VARIABLES ////////////////////////////////////////////////// */

:root {

	/* ASPECT RATIO: */

	--ar: 1.618034;
/* 	--ar: 1.7; */
	/* VIEWPORT WIDTH */

	--vw-from: 320;
	--vw-to: 1920;

	/* FONT SIZE: */

	--fs-from: 14;
	--fs-to: 15;

	--fs: calc( ( 100vw - var( --vw-from ) * 1px )
		* ( var( --fs-to ) - var( --fs-from ) )
		/ ( var( --vw-to ) - var( --vw-from ) )
		+ var( --fs-from ) * 1px );

	--fs-title: calc( 1em * var( --ar ) );
	--fs-middle: calc( ( var( --fs-title ) - var( --fs ) ) / 2 + var( --fs) );

	/* LINE HEIGHT */

	--lh: var( --ar );
	--lh-px: calc( 1em * var( --ar ) );

	--lh-gap: calc( var( --lh ) * 1em - 1em );
	--lh-gap-half: calc( var( --lh-gap ) / 2  );

	/* FIXED BUTTON SIZE: */

	--fbs-from: 50;
	--fbs-to: 60;

	--fbs: calc( ( 100vw - var( --vw-from ) * 1px )
		* ( var( --fbs-to ) - var( --fbs-from ) )
		/ ( var( --vw-to ) - var( --vw-from ) )
		+ var( --fbs-from ) * 1px );

	/* GAPS: */

	--gap-from: var(--fs-from );
	--gap-to: var( --fbs-to );

	--gap: calc( ( 100vw - var( --vw-from ) * 1px )
		* ( var( --gap-to ) - var( --gap-from ) )
		/ ( var( --vw-to ) - var( --vw-from ) )
		+ var( --gap-from ) * 1px );

	--gap-big-from: var(--fs-from );
	--gap-big-to: calc( var( --gap-to ) * var( --ar ) );

	--gap-big: calc( ( 100vw - var( --vw-from ) * 1px )
		* ( var( --gap-big-to ) - var( --gap-big-from ) )
		/ ( var( --vw-to ) - var( --vw-from ) )
		+ var( --gap-big-from ) * 1px );

	--gap-big-combined: calc( var( --fbs ) + var( --gap-big ) * 2 );

	--gap-small-from: var(--fs-from );
	--gap-small-to: calc( var( --gap-to ) / var( --ar ) );

	--gap-small: calc( ( 100vw - var( --vw-from ) * 1px )
		* ( var( --gap-small-to ) - var( --gap-small-from ) )
		/ ( var( --vw-to ) - var( --vw-from ) )
		+ var( --gap-small-from ) * 1px );

	--gap-smaller-from: var(--fs-from );
	--gap-smaller-to: calc( var( --gap-small-to ) / var( --ar ) );

	--gap-smaller: calc( ( 100vw - var( --vw-from ) * 1px )
		* ( var( --gap-smaller-to ) - var( --gap-smaller-from ) )
		/ ( var( --vw-to ) - var( --vw-from ) )
		+ var( --gap-smaller-from ) * 1px );


	--gap-smallest-from: var(--fs-from );
	--gap-smallest-to: calc( var( --gap-smaller-to ) / var( --ar ) );

	--gap-smallest: calc( ( 100vw - var( --vw-from ) * 1px )
		* ( var( --gap-smallest-to ) - var( --gap-smallest-from ) )
		/ ( var( --vw-to ) - var( --vw-from ) )
		+ var( --gap-smallest-from ) * 1px );

	/* COLORS: */

	--clr-black: #555;
/* 	--clr-gray: #777; */
/* 	--clr-light-gray: #bbb; */
	--clr-white: #fff;

/*	--clr-blue: #359fb7;
	--clr-green: #76a844;
	--clr-purple: #e56d95;
	--clr-yellow: #ffa953;*/

/* 	--clr-blue: #3090a6; */
/* 	--clr-green: #6b983e; */
/* 	--clr-purple: #e25a88; */
/* 	--clr-yellow: #ff9e3d; */

		/* FONT WEIGHT: */

	--clr-blue: #2a7692;
	--clr-green: #588637;
	--clr-purple: #de446b;
	--clr-yellow: #ff9124;

	--fw-title: 680;
/* 	--fw-subtitle: 660; */
	--fw-subtitle: 680;

	/* OTHERS: */

	--anim-short-dur: 500ms;

	--border: 2px solid var( --clr-blue );
	--border-radius: calc( var( --fs ) / var( --ar ) );

	--column-width: calc( 100vw - var( --gap-big ) * 2 );

}

@media ( min-width: 640px ) {

	:root {

		--column-width: calc( 100vw - var( --gap-big-combined ) * 2 );

	}

}

@media ( min-width: 1280px ) {

	:root {

		--column-width: calc( ( 100vw - var( --gap-big-combined ) * 2 - var( --gap-big ) ) / 2 );

	}

}

/* END: COMMON VARIABLES //////////////////////////////////////////////////// */