/*----------------------------------------------------------------- */
/* VARIABLES / CUSTOM PROPERTIES
/*----------------------------------------------------------------- */

:root
{
	/* COLORS
	----------------------------------------- */
	--color__black: 0, 0, 0;
	--color__white: 255, 255, 255;

	--color__pink: 246, 58, 116;
	--color__purple: 151, 139, 195;
	--color__purple-dark: 34, 23, 63;
	--color__purple-light: 209, 184, 238;
	--color__purple-lighter: 248, 241, 255;
	--color__grey: 87, 98, 113;
	--color__grey-light: 241, 240, 255;
	--color__grey-dark: 84, 84, 84;

	--color__grey-shadow: 115, 105, 134;
	--color__dark-shadow-1: 20, 4, 39;
	--color__dark-shadow-2: 180, 176, 228;
	--color__dark-shadow-3: 64, 6, 93;
	--color__dark-shadow-4: 157, 85, 242;
	--color__dark-shadow-5: 20, 4, 40;

	--color__blue-shadow-1: 58, 143, 246;

	--color__purple-gradient-1: 26, 16, 57;
	--color__purple-gradient-2: 18, 1, 35;
	--color__purple-gradient-3: 15, 17, 47;
	--color__purple-gradient-4: 43, 28, 62;
	--color__purple-gradient-5: 25, 13, 53;
	--color__purple-gradient-6: 26, 17, 59;

	--color__grey-gradient-1: 181, 177, 187;
	--color__grey-gradient-2: 113, 87, 146;
	--color__grey-gradient-3: 102, 91, 115;
	--color__grey-gradient-4: 163, 150, 180;

	--color__dark-gradient-1: 11, 13, 35;
	--color__dark-gradient-2: 4, 4, 12;
	--color__dark-gradient-3: 160, 149, 174;
	--color__dark-gradient-4: 24, 30, 76;
	--color__dark-gradient-5: 29, 1, 39;
	--color__dark-gradient-6: 9, 2, 26;

	--color__footer: 17, 5, 37;

	/* FONTS
	----------------------------------------- */
	--font-family__default: 'Work Sans', sans-serif;
	--font-family__heading: 'Hot Rush', sans-serif;
	--font-family__heading-striped: 'Hot Rush Striped', sans-serif;
	--font-family__extra: 'Thunderstorm', sans-serif;
	--font-size__rem-constant: 62.5%;
	--font-size__default: clamp(1.6rem, 1.8vw, 1.8rem);
	--font-size__small: 1.6rem;

	--font-size__h1: clamp(6.2rem, 11.4vw, 11.4rem);
	--font-size__h2: clamp(4.8rem, 7.4vw, 7.4rem);
	--font-size__h3: clamp(4rem, 5.4vw, 5.4rem);
	--font-size__h4: clamp(2.8rem, 3.8vw, 3.8rem);
	--font-size__h5: clamp(2.8rem, 3.2vw, 3.2rem);

	--font-size__h1-blog: clamp(3.6rem, 5.6vw, 5.6rem);
	--font-size__h2-blog: clamp(2.4rem, 2.8vw, 2.8rem);
	--font-size__h3-blog: clamp(2rem, 2vw, 2rem);
	--font-size__h4-blog: 1.8rem;

	--line-height__default: 1.888em;

	--font-weight__light: 300;
	--font-weight__normal: 400;
	--font-weight__medium: 500;
	--font-weight__bold: 600;

	/* LAYOUT
	----------------------------------------- */
	--width__website: 1920px;
	--width__extra: 1640px;
	--width__webdesign: 1195px;
	--width__layout: 1170px;
	--width__special: 900px;
	--width__content: 830px;
	--width__sidebar: 360px;

	/* PADDINGS | MARGINS | BORDERS
	----------------------------------------- */
	--padding__default: 30px;
	--padding__special: 40px;

	/* BLOCKS
	----------------------------------------- */
	--blocks__gap: 44px;
	--blocks__gap-negative: -44px;

	/* HEADER
	----------------------------------------- */
	--header__height: 84px;
	
	/* ANIMATIONS
	----------------------------------------- */
	--transition-duration__default: 0.5s;

	/* OTHERS
	----------------------------------------- */
	--js__scroll-gap: 114;

}

@media (max-width: 960px)
{
	:root
	{
		/* HEADER
		----------------------------------------- */
		--header__height: 72px;
		--header__height-sticky: 50px;

		/* OTHERS
		----------------------------------------- */
		--js__scroll-gap: 87;
	}
}

@media (max-width: 760px)
{
	:root
	{
		/* PADDINGS | MARGINS | BORDERS
		----------------------------------------- */
		--padding__default: 20px;
		--padding__special: 20px;

		/* BLOCKS
		----------------------------------------- */
		--blocks__gap: 22px;
		--blocks__gap-negative: -22px;

		/* OTHERS
		----------------------------------------- */
		--js__scroll-gap: 65;
	}
}