:root {
	--black: #1C1C1C;
	--red: #AF5F5F;
	--green: #5F875F;
	--yellow: #87875F;
	--blue: #5F87AF;
	--magenta: #5F5F87;
	--cyan: #5F8787;
	--white: #6C6C6C;
	--light_white: #ffffff;
}

:root {
	/* Base */
	--font-size-base: 16px;
	/* 1rem = 16px */

	/* Type scale (modular, readable values) */
	--fs-xs: 0.75rem;
	/* 12px */
	--fs-sm: 0.875rem;
	/* 14px */
	--fs-base: 1rem;
	/* 16px */
	--fs-md: 1.125rem;
	/* 18px */
	--fs-lg: 1.25rem;
	/* 20px */
	--fs-xl: 1.5rem;
	/* 24px */
	--fs-xxl: 2rem;
	/* 32px */

	/* Spacing grid */
	--space-unit: 8px;
	/* 8px baseline */
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: "Poppins", sans-serif;
	background-color: var(--light_white);
	overflow-x: hidden;
	max-width: 1400px;
	margin: 0 auto;

	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

a {
	color: var(--black);
	text-decoration: none;
}

/* --------------------------------- NAVBAR --------------------------------- */

nav {
	display: flex;
	justify-content: space-between;
	align-items: center;

	padding: 0 25px;
	height: 80px;
}

nav .left a {
	font-size: var(--fs-xl);
	font-weight: 600;
}

nav .right {
	white-space: nowrap;
}

nav .right a {
	padding: 0 10px;
}

nav .right a i {
	margin-right: 5px;
}

nav .right #language-btn {
	margin-left: 15px;
	background-color: transparent;
	border: 2px solid var(--blue);
	padding: 5px 10px;
	border-radius: 10px;
	color: var(--blue);
	cursor: pointer;
	font-size: var(--fs-sm);
	transition: .5s;
}

nav .right #language-btn:hover {
	color: var(--red);
	border-color: var(--red);
}

nav .right #language-btn i {
	margin-right: 5px;
}

nav .right a.active {
	color: var(--red);
}

/* --------------------------------- FOOTER --------------------------------- */

footer {
	background-color: var(--black);
	color: var(--light_white);
	text-align: center;
	padding: 20px;
	font-size: var(--fs-sm);
	margin-top: auto;
}

/* ------------------------------- RESPONSIVE ------------------------------- */

@media (max-width: 600px) {
	nav {
		padding: 0 20px;
	}

	nav .right a span {
		display: none;
	}

	nav .right a {
		font-size: var(--fs-xl);
	}
}

@media (max-width: 375px) {
	nav .right #language-btn {
		margin-left: 0px;
	}
}