:root {
	/* BASE COLORS */
	--color-black: #000000;
	--color-white: #ffffff;
  
	/* PRIMARY COLOUS */
	--color-soft-white: #f1f1f1;
	--color-dark-gray: #121212;
	--color-primary-orange: #dd3b00;
	--color-orange-light: #ff5c26;
	--color-orange-dark: #b02c00;

	/* TYPOGRAPHY */
	--font-primary: "Bricolage Grotesque", sans-serif;

	/* FONT WEIGHTS */
	--font-weight-light: 300;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-bold: 700;
	
	/* LINE HEIGHTS */
	--line-height-heading: 1.2;
	--line-height-body: 1.5;
	--line-height-tight: 1.1;
	
	/* LETTER SPACING */
	--letter-spacing-tight: -0.02em;
	--letter-spacing-normal: 0em;
	--letter-spacing-wide: 0.02em;
	
	/* TYPE SIZES */
	--font-size-h1: 3.25rem; /* 48px */
	--font-size-h2: 2.2rem; /* 40px */
	--font-size-h3: 2rem; /* 32px */
	--font-size-h4: 1.5rem; /* 24px */
	--font-size-h5: 1.25rem; /* 20px */
	--font-size-h6: 1rem; /* 16px */
	--font-size-body: 1rem; /* 16px */
	--font-size-small: 0.875rem; /* 14px */
	--font-size-caption: 0.75rem; /* 12px */
}

body {
	font-family: var(--font-primary);
}

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

	.logo {
		width: 35px;
		height: auto;
	}
}

/* TYPE HIERARCHY */

h1 {
	font-size: calc(var(--font-size-h1)*0.8);
	font-weight: var(--font-weight-bold);
}

h2 {
	font-size: calc(var(--font-size-h2)*0.8);
}

p {
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-light);
	letter-spacing: var(--letter-spacing-wide);
	line-height: var(--line-height-body);
	max-width: 55ch;
}

.serial-numbers {
	font-size: calc(var(--font-size-h1)*5);
	letter-spacing: var(--letter-spacing-tight);
	line-height: 100%;
}

.website-name {
	font-size: calc(var(--font-size-h1)*0.5);
	font-weight: var(--font-weight-medium);
}

/* SECTIONS */

/* div {
	padding: 5px;
	border: red 1px solid;
} */

.parent-container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2rem;
	height: auto;
}

.parent-container .child:nth-child(2) {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2rem;
}

section {
	height: auto;
	padding: 2rem;
}

.elements {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	gap: 5rem;
}

#section-one, #section-four {
	background-color: var(--color-dark-gray);

	h1, h2, p {
		color: #f1f1f1;
	}
}

.section-heading {
	display: flex;
	gap: 1rem;
}

#section-three {
	background-color: var(--color-soft-white);
}

#section-two, #section-five {
	background-color: var(--color-primary-orange);
}

.sections {
	align-content: center;
	justify-items: center;

	div {
		max-width: auto;
	}
}

/* FOOTER */

footer {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	height: auto;
	padding: 2rem;
	.logo {
		width: 35px;
		height: auto;
	}
}

/* MEDIA QUERIES */

@media (min-width: 700px) {

	/* SECTIONS */

	.parent-container {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		gap: 2rem;
		height: auto;
	}

	section {
		/* height: 70vh; */
		height: auto;
	}

	/* TYPE */

	h1 {
		font-size: var(--font-size-h1);
		font-weight: var(--font-weight-bold);
	}
	
	h2 {
		font-size: var(--font-size-h2);
	}
	
	p {
		font-size: var(--font-size-body);
		font-weight: var(--font-weight-light);
		letter-spacing: var(--letter-spacing-wide);
		line-height: var(--line-height-body);
		max-width: 55ch;
	}

	.serial-numbers {
		font-size: calc(var(--font-size-h1)*8);
		line-height: 70%;
		transform: translate(0, 2%);
	}

	.elements {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		gap: 15rem;
	}

	/* .project-links {
		display: flex;
		justify-content: center;
	} */

	.website-name {
		font-size: var(--font-size-h2);
		font-weight: var(--font-weight-medium);
	}
}