@charset "utf-8";

/* Global
======================================== */
@import url("style-reset.css");
@import url("style-texts.css");
@import url("style-global.css");
@import url("style-media.css");
@import url("style-forms.css");
@import url("style-gradient.css");

/* Nav
======================================== */
@import url("style-header.css");
@import url("style-footer.css");

/* Main pages
======================================== */
@import url("style-home.css");
@import url("style-index.css");
@import url("style-categories.css");
@import url("style-shop.css");
@import url("style-tools.css");
@import url("style-about.css");

/* Project page
======================================== */
@import url("style-project.css");
@import url("style-project--slider.css");
@import url("style-project--infos.css");
@import url("style-project--credits.css");
@import url("style-project--description.css");
@import url("style-project--tools.css");
@import url("style-project--related.css");

/* Other pages
======================================== */
@import url("style-product.css");
@import url("style-tool.css");

/* Modules
======================================== */
@import url("style-module--form.css");
@import url("style-module--message.css");
@import url("style-module--related-items.css");
@import url("style-module--slider.css");
@import url("style-module--video-player.css");


/* Vars
======================================== */
:root{

	/* Colors */
	--color-txt: black;
	--color-txt-highlight: #a0a0a0;
	--color-txt-highlight--invert: #5f5f5f;
	--color-txt-inactive: #a0a0a0;
	--color-txt-warning: #ff1a1a;
	--color-bg: white;
	--color-bg-img: #a0a0a0;

	/* Heights */
	--height-viewport: 100vh;
	--height-header: calc(var(--page-top) + var(--height-txt) + var(--m-sections));
	--height-txt: calc(var(--fs)*var(--lh));

	/* Ratios */
	--ar-card--product: 125%; /* aspect-ratio: 4/5 */

	/* Global */
	--top: calc(var(--height-header)*-1);
	--global-speed: 200ms;
	--global-speed-x2: 400ms;
	--global-ease: cubic-bezier(0.25, 0.1, 0.25, 1); /* ease */
	--global-ease-movement: cubic-bezier(0.83, 0, 0.17, 1);

	/* Page */
	--page-top: 8px;
	--page-sides: 12px;
	--page-bottom: 8px;

	/* Cols */
	--cols: 26;
	--cols-gap: 6px;

	/* Rows */
	--rows-gap: 6px;

	/* Margins */
	--m-caption: 6px;
	--m-blocks: calc(var(--m-sections)/3);
	--m-sections: 90px;
	--m-footer: calc(var(--m-sections)*3);

	/* Pills */
	--pill-w: 200px;
	--pill-m: 3px 8px 2px;
	--pill-radius: 3px;
	--pill-color-bg-success: #0f0;

}
@media (max-width: 1920px){
	:root{

		/* Cols */
		--cols: 24;

		/* Margins */
		--m-sections: 60px;

	}
}
@media (max-width: 1080px){
	:root{
		--cols: 18;
	}
}
@media (max-width: 834px){
	:root{
		--cols: 12;
	}
}
@media (max-width: 600px){
	:root{
		--top: 0;
		--cols: 8;
		--m-footer: calc(var(--m-sections)*2);
	}
}
/* @media (max-width: 390px){
	:root{
		--m-sections: 50px;
	}
} */
/* @media (max-width: 320px){
	:root{
		--m-sections: 40px;
	}
} */