@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&display=swap');


/* ==================== VARIABLES ==================== */
:root {
	--color-primary: rgb(209, 113, 27);
	--color-white: #ffffff;
	--color-light-gray: #f3f3f3;
	--color-dark-gray: #272727;
	--color-background: rgb(228, 228, 228);
	--color-black: #000000;
	--font-family: "Montserrat", sans-serif;
}

/* ==================== GLOBALES ==================== */
* {
	font-family: var(--font-family);
	box-sizing: border-box;
}

html,
body {
	overflow-x: hidden;
	height: 100%;
	scroll-behavior: smooth;
}

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

main {
	flex: 1;
}

html {
	font-size: 62.5%;
	text-decoration: none;
	list-style: none;
}

body {
	background: var(--color-background);
}

p {
	font-weight: 400;
	font-size: 1.6rem;
	color: var(--color-light-gray);
}

a {
	text-decoration: none;
}

/* ==================== ANIMATIONS ==================== */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==================== UTILITY CLASSES ==================== */
.u-fade-in {
	animation: fadeIn 1s ease-in-out;
}

.u-italic {
	font-family: var(--font-family);
	font-style: italic;
}

.u-full-height {
	height: 100vh;
}

.u-text-primary {
	color: var(--color-primary);
}

.u-section-padding {
	padding-top: 15rem;
	padding-bottom: 15rem;
}

.u-pt-10 {
	padding-top: 10rem;
}

.u-pb-10 {
	padding-bottom: 10rem;
}