@charset "utf-8";

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

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

/* Home
======================================== */
@import url("style-featuerd--projects.css");
@import url("style-card--featured.css");

/* Projects
======================================== */
@import url("style-projects.css");
@import url("style-projects--header.css");
@import url("style-card--project.css");

/* Project
======================================== */
@import url("style-project.css");
@import url("style-project--header.css");
@import url("style-project--footer.css");
@import url("style-module--slider.css");

/* Contact
======================================== */
@import url("style-contact.css");

/* Modules
======================================== */
@import url("style-module--heading.css");

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

	/* Colors */
	--color-txt: black;
	--color-txt--disabled: rgb(128, 128, 128);
	--color-txt--highlight: #bf2d29;
	--color-bg: rgb(245, 245, 245);
	--color-bg--img: rgb(128, 128, 128);
	--color-lines: #999999;

	/* Global */
	--global-ease: cubic-bezier(0.83, 0.00, 0.17, 1.00);
	--global-speed--x1: 200ms;
	--global-speed--x2: calc(var(--global-speed--x1)*2);

	/* Heights */
	--height-viewport: 100vh;
	--height-viewport-s: calc(var(--height-viewport) - var(--height-header));
	--height-header: calc(100vw/(1920/30));
	--height-row-s: calc(100vw/(1920/30));
	--height-row-m: calc(100vw/(1920/60));
	--height-row-l: calc(100vw/(1920/90));

	/* Page */
	--page-sides: calc(100vw/(1920/30));
	--page-sides-l: var(--page-sides);
	--page-bottom: calc(100vw/(1920/60));

	/* Cols */
	--cols: 12;
	--cols-gap: calc(100vw/(1920/20));

	/* Rows */
	--rows-gap-s: calc(100vw/(1920/7));
	--rows-gap-m: calc(100vw/(1920/10));
	--rows-gap-l: calc(100vw/(1920/30));

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

		/* Heights */
		--height-header: 30px;
		--height-row-s: 30px;
		--height-row-m: 60px;
		--height-row-l: 90px;

		/* Page */
		--page-sides: 30px;
		--page-bottom: 60px;

		/* Cols */
		--cols-gap: 20px;

		/* Rows */
		--rows-gap-s: 7px;
		--rows-gap-m: 10px;
		--rows-gap-l: 30px;

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

		/* Heights */
		--height-header: var(--height-row-m);
		--height-row-l: var(--height-row-m);

		/* Page */
		--page-sides: 45px;
		--page-sides-l: 45px;

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

		/* Page */
		--page-sides: 15px;

		/* Rows */
		--rows-gap-l: 20px;

	}
}