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

:root {
	/* COLORS
	----------------------------------------- */
	--color__beige: #6f6f6d;
	--color__beige-light: #cdcdc5;
	--color__black: #343f49;
	--color__black-light: #6a7884;
	--color__black-lighter: #64717d;
	--color__black-lightest: #acb4bc;
	--color__green: #49a658;
	--color__green-dark: #3c954a;
	--color__red: #cd0000;
	--color__red-light: #fbe9e9;
	--color__red-dark: #b50000;
	--color__red-darker: #a40000;
	--color__white: #fff;
	--color__white-dark: rgb(244, 244, 241);
	--color__white-darker: #e0e0d9;
	--color__gray-darker: #64717d;
	--color__gray-dark: #6a7884;
	--color__gray: #d8d8d8;
	--color__gray-muted: #c0cfda;
	--color__orange: #ee7f01;

	/* COLORS - SPECIFIC */
	--color__facebook: #3b5998;
	--color__facebook-hover: #324b81;
	--color__flickr: #f40083;
	--color__instagram: #c32aa3;
	--color__linkedin: #007bb5;
	--color__tiktok: #69c9d0;
	--color__twitter: #1da1f2;
	--color__vkontakte: #4a76a8;
	--color__youtube: #ff0000;

	/* COLORS - STATUS */
	--color__status-incomplete-light: #fff0df;
	--color__status-incomplete: #ee7f01;
	--color__status-submit-light: #e5fad0;
	--color__status-submit: #5fab0c;
	--color__status-delete-light: #ffcccc;
	--color__status-delete: #cd0000;

	/* FONTS
	----------------------------------------- */
	--font-family__default: "Nunito Sans", "Arial", sans-serif;
	--font-family__heading: "Lora", "Times New Roman", serif;
	--font-size__rem-constant: 62.5%;
	--font-size__default: 1.9rem;
	--line-height__default: 3rem;
	--font-weight__default: 400;
	--font-weight__bold: 700;

	/* LAYOUT
	----------------------------------------- */
	--width__website: 1440px;
	--width__main: 1180px;
	--width__content: 800px;
	--width__sidebar: 340px;
	--width__form: 980px;

	/* PADDINGS | MARGINS | BORDERS
	----------------------------------------- */
	--padding__default: 25px;
	--padding__default-negative: -25px;

	/* ANIMATIONS
	----------------------------------------- */
	--transition-delay__default: 0.5s;

	/* HEADER
	----------------------------------------- */
	--header__height: 115px;
}

@media (max-width: 1230px) {
	:root {
		/* HEADER
		----------------------------------------- */
		--header__height: 50px;
	}
}

@media (max-width: 960px) {
	:root {
		/* LAYOUT
		----------------------------------------- */
		--width__sidebar: 100%;
	}
}

@media (max-width: 760px) {
	:root {
		/* FONTS
		----------------------------------------- */
		--font-size__default: 1.6rem;
		--line-height__default: 2.2rem;

		/* PADDINGS | MARGINS | BORDERS
		----------------------------------------- */
		--padding__default: 10px;
		--padding__default-negative: -10px;
	}
}