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

:root
{
	/* COLORS
	----------------------------------------- */
	--color__black: #242424;
	--color__black-light: #1C1C1F;
	--color__black-light2: #525252;
	--color__grey: #e9e9e9;
	--color__grey-light: #F1F1F1;
	--color__grey-dadrk: #a7a7a7;
	--color__blue: #1E21A8;
	--color__blue-light: #272BD2;
	--color__red: #BC0806;
	--color__red-light: #DE1C1A;
	--color__white: #fff;
	--color__yellow: #EBCB00;
	--color__yellow-light: #FFDC00;

	--color-text: var(--color__black-light);

	--gradient__blue-red: linear-gradient(270deg, #D11834 0%, #021AC3 100%);
	--gradient__red-red-light: linear-gradient(270deg, #ED1B2D 0%, #BC0806 100%);

	--border__red: 1px solid rgba(222, 28, 26, 0.1);
	--border__black: 1px solid rgba(84, 84, 84, 0.1);

	/* FONTS
	----------------------------------------- */
	--font-family__default: 'Roboto', sans-serif;
	--font-family__extra: 'PT Serif', serif;
	--font-size__rem-constant: 62.5%;
	--font-size__default: clamp(1.6rem, 1.8vw, 1.8rem);
	--font-size__medium: 1.6rem;
	--font-size__small: 1.4rem;
	--font-size__h1-big: clamp(3.6rem, 8.4vw, 8.4rem);
	--font-size__h1: clamp(3.2rem, 5.6vw, 5.6rem);
	--font-size__h2-big: clamp(3.4rem, 7vw, 7rem);
	--font-size__h2: clamp(2.8rem, 3.8vw, 3.8rem);
	--font-size__h3: clamp(2rem, 2.8vw, 2.8rem);
	--font-size__h4: clamp(1.8rem, 2vw, 2rem);
	--font-weight__normal: 300;
	--font-weight__regular: 400;
	--font-weight__medium: 500;
	--font-weight__bold: 700;
	--line-height__default: clamp(2.8rem, 3.2vw, 3.2rem);
	--line-height__small: clamp(1.5rem, 2.1vw, 2.1rem);

	/* LAYOUT
	----------------------------------------- */
	--width__edge: 1920px;
	--width__website: 1170px;
	--width__about: 1070px;
	--width__layout: 970px;
	--width__content: 770px;
	--width__contact: 570px;
	--width__sidebar: 370px;
	--width__links: 200px;

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

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

	--blocks__gap-xsmall: 15px;
	--blocks__gap-small: 25px;
	--blocks__gap-medium: 35px;
	--blocks__gap-large: 50px;
	--blocks__gap-xlarge: 100px;
	--blocks__gap-xxlarge: 140px;

	/* HEADER
	----------------------------------------- */
	--header__notification-height: 36px;
	--header__height: 140px;
	
	/* ANIMATIONS
	----------------------------------------- */
	--transition-duration__default: 0.5s;

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

}

@media (max-width: 960px) {
	:root {
		/* HEADER
		----------------------------------------- */
		--header__notification-height: 68px;
		--header__height: 80px;
	}
}

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

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

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