@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;700&family=STIX+Two+Text:ital@1&display=swap');

:root {
	--Main-dark: #141414;
	--Main-light: #FFFFFF;
	--Med-dark: #73827D;
	--Med-light: #D9D9D7;
	--Verde-claro: #828C28;
	--Verde: #024F1E;
	--Coral: #DF6480;
	--Naranja: #CC4B0A;
	--Amarillo: #DEB900;

	--Main-color: var(--Main-dark);
	--Main-background: var(--Main-light);
	--Main-margin: 10px;
	--Main-margin-half: calc(var(--Main-margin)/2);

	--Main-font-family: 'Manrope', serif;
	--Main-italic-font-family: 'STIX Two Text', serif;
	--Main-font-weight: 300;
	--Main-letter-spacing: 0;

	--Menu-font-size: 14px;
	--Menu-font-weight: 400;
	--Menu-line-height: 19px;
	--Menu-letter-spacing: 0px;
	--Menu-font-weight-hover: 700;

	--Menu-hover-font-family: var(--Main-italic-font-family);
	--Menu-hover-font-size: 16px;

	--Name-font-size: 30px;
	--Name-line-height: var(--Name-font-size);
	--Name-font-weight: 300;
	--Name-letter-spacing: calc(var(--Name-font-size)*-0.01);
	--Name-dot-color: var(--Verde-claro);

	--Name-tag-font-size: 18px;
	--Name-tag-line-height: 25px;
	--Name-tag-font-weight: 400;
	--Name-tag-letter-spacing: calc(var(--Name-tag-font-size)*-0.01);

	--Name-tag-italic-font-size: 20px;
	--Name-tag-italic-letter-spacing: calc(var(--Name-tag-italic-font-size)*-0.02);
	
	--Name-dot-size: 12px;
	
	--Title-1-font-size: 100px;
	--Title-1-line-height: var(--Title-1-font-size);
	--Title-1-font-weight: 300;
	--Title-1-letter-spacing: calc(var(--Title-1-font-size)*-0.03);

	--Title-2-font-size: 48px;
	--Title-2-line-height: var(--Title-2-font-size);
	--Title-2-font-weight: 500;
	--Title-2-text-transform: uppercase;

	--Title-3-font-size: 37px;
	--Title-3-line-height: var(--Title-3-font-size);
	--Title-3-font-weight: 500;
	--Title-3-text-transform: uppercase;
	
	--Title-4-font-size: 30px;
	--Title-4-line-height: 41px;
	--Title-4-font-weight: 300;
	--Title-4-letter-spacing: calc(var(--Title-4-font-size)*-0.01);

	--Title-5-font-size: 30px;
	--Title-5-line-height: 40px;
	--Title-5-font-weight: 300;
	--Title-5-letter-spacing: calc(var(--Title-5-font-size)*-0.01);
	--Title-5-italic-font-size: 32px;

	--Tags-color: var(--Med-light);

	--Tags-1-font-size: 13px;
	--Tags-1-line-height: 18px;
	--Tags-1-font-weight: 400;
	--Tags-1-text-transform: uppercase;

	--Tags-2-font-size: 11px;
	--Tags-2-line-height: 15px;
	--Tags-2-font-weight: 400;
	--Tags-2-text-transform: uppercase;

	--Table-font-size: 13px;
	--Table-line-height: 18px;
	--Table-font-weight: 400;
	--Table-text-transform: uppercase;
	--Table-bold-font-weight: 700;
	--Table-letter-spacing: 0;
	
	--Text-cv-font-size: 13px;
	--Text-cv-line-height: 20px;
	--Text-cv-text-transform: uppercase;
	--Text-cv-aclaracion-letter-spacing: calc(var(--Text-cv-font-size)*-0.01);
	/* font-weight y letter-spacing --Text */

	--Text-font-weight: 400;
	--Text-letter-spacing: 0;
	--Text-bold-font-weight: 700;

	--Text-title-font-size: 35px;
	--Text-title-line-height: var(--Text-title-font-size);
	--Text-title-font-weight: 500;
	--Text-title-text-transform: uppercase;
	
	--Text-1-font-size: 16px;
	--Text-1-italic-font-size: 18px;

	--Text-2-font-size: 16px;
	--Text-2-line-height: 22px;

	--Text-2-italic-font-size: 18px;
	--Text-2-italic-line-height: 23px;

	--Text-3-font-size: 14px;
	--Text-3-line-height: 19px;

	--Menu-color: var(--Main-dark);
	--Menu-background-color: var(--Main-light);

	--Project-color: var(--Main-light);
	--Project-background-color: var(--Main-dark);

}

.show-intro {
	--Name-font-size: 55px;
	--Name-letter-spacing: calc(var(
	--Name-font-size)*-0.01);
	--Name-dot-size: 15px;
	--Menu-color: var(
	--Main-light);
	--Menu-background-color: var(
	--Main-dark);
	--Name-dot-color: var(--Amarillo);
	--Main-background: var(
	--Main-dark);
}

.dark-theme {
	--Main-color: var(--Main-light);
	--Main-background: var(--Main-dark);
	--Menu-color: var(--Main-light);
	--Menu-background-color: var(--Main-dark);
	--Name-dot-color: var(--Naranja);
}

b {
	font-weight: 700;
}

i {
	font-family: var(--Main-italic-font-family);
}

@media only screen and (max-width : 767px) {
	:root {

		--Main-margin: 7px;

		--Name-font-size: 25px;
		--Name-line-height: 30px;

		--Name-tag-font-size: 16px;
		--Name-tag-italic-font-size: 18px;

		--Name-dot-size: 12px;

		--Title-1-font-size: 70px;

		--Title-2-font-size: 40px;

		--Title-3-font-size: 35px;

		--Title-4-font-size: 25px;
		--Title-4-line-height: 34px;

		--Title-5-font-size: 25px;
		--Title-5-font-weight: 300;
		--Title-5-italic-font-size: 27px;

		--Tags-1-font-size: 12px;
		--Tags-1-line-height: 16px;
		
		--Table-font-size: 11px;
		--Table-line-height: 15px;

		--Text-title-font-size: 27px;
		
		--Text-1-font-size: 15px;
		--Text-1-line-height: 20px;
		--Text-1-italic-font-size: 17px;
	
		--Text-2-font-size: 14px;
		--Text-2-line-height: 19px;
	
		--Text-3-font-size: 13px;
		--Text-3-line-height: 18px;


	}
	.show-intro {
		--Name-font-size: 40px;
		--Name-font-weight: 300;
		--Name-dot-size: 13px;
	}
}

.menu-mobile {
	--Menu-font-size: 40px;
	--Menu-line-height: 80px;
	--Menu-font-weight: 300;
	--Menu-letter-spacing: calc(var(--Menu-font-size)*-0.01);
}

.nav-mobile {
	--Menu-color: var(--Main-light);
	--Menu-background-color: var(--Main-dark);
}

.menu-mobile li a:hover {
	--Menu-hover-font-size: 41px;
}