styles.css

:root {
	--font-family: 'Arial', sans-serif;
	--font-family-header: 'Helvetica Neue', sans-serif;
	--font-size-base: 16px;
	--font-size-large: 2.5rem;
	--font-size-medium: 1.2rem;
	--font-size-small: 1rem;
	--font-size-xsmall: 0.9rem;
	--color-bg: #000;
	--color-text: #fff;
	--color-link: #5d61ad;
	--color-border: #fff;
	--padding-large: 60px;
	--padding-medium: 40px;
	--padding-small: 20px;
	--padding-xsmall: 10px;
}

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

html {
	font-size: var(--font-size-base);
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-family);
	line-height: 1.6;
	background-color: var(--color-bg);
	color: var(--color-text);
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* Header Styles */
header {
	background-color: var(--color-bg);
	padding: var(--padding-medium) 0;
	text-align: center;
	border-bottom: 1px solid var(--color-border);
}

header h1 {
	font-family: var(--font-family-header);
	font-weight: bold;
	font-size: var(--font-size-large);
	color: var(--color-text);
	margin-bottom: var(--padding-xsmall);
}

header p {
	font-size: var(--font-size-medium);
	color: var(--color-text);
	letter-spacing: 0.05em;
}

/* Navigation Styles */
nav {
	text-align: center;
	background-color: var(--color-bg);
	padding: var(--padding-xsmall) 0;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}

nav ul {
	list-style-type: none;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

nav ul li {
	margin: 0 var(--padding-medium);
}

nav ul li a {
	text-decoration: none;
	color: var(--color-text);
	font-size: var(--font-size-small);
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	transition: color 0.3s ease;
}

nav ul li a:hover {
	color: var(--color-text);
}

/* Section Styles */
section {
	padding: var(--padding-large) var(--padding-xsmall);
	max-width: 1200px;
	margin: 0 auto;
	flex: 1;
}

section h2 {
	font-size: 2rem;
	color: var(--color-text);
	font-weight: bold;
	margin-bottom: var(--padding-small);
}

section p {
	font-size: 1.1rem;
	color: var(--color-text);
	line-height: 1.7;
	display: flex;
	justify-content: left;
	flex-wrap: wrap;
	margin-bottom: var(--padding-xsmall);
}

section ul {
	list-style-type: none;
}

section ul li {
	font-size: var(--font-size-small);
	color: var(--color-text);
	margin-bottom: var(--padding-xsmall);
}

section ul li a {
	color: var(--color-link);
	text-decoration: none;
	transition: color 0.3s ease;
}

section ul li a:hover {
	color: var(--color-text);
}

/* Footer Styles */
footer {
	background-color: var(--color-bg);
	padding: var(--padding-small) 0;
	text-align: center;
	border-top: 1px solid var(--color-border);
}

/* Media Queries */
@media (max-width: 768px) {
	header h1 {
	  font-size: 2rem;
	}

	header p {
	  font-size: var(--font-size-small);
	}

	section h2 {
	  font-size: 1.8rem;
	}

	section p {
	  font-size: var(--font-size-small);
	}

	nav ul {
	  flex-direction: column;
	}

	nav ul li {
	  margin: var(--padding-small) 0;
	}

	section {
	  padding: var(--padding-medium) var(--padding-xsmall);
	}
}

@media (max-width: 480px) {
	header h1 {
	  font-size: 1.5rem;
	}

	header p {
	  font-size: var(--font-size-xsmall);
	}

	section h2 {
	  font-size: 1.5rem;
	}

	section p {
	  font-size: var(--font-size-xsmall);
	}

	nav ul li {
	  margin: var(--padding-xsmall) 0;
	}

	section {
	  padding: 30px var(--padding-xsmall);
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	header h1 {
	  font-size: 2.2rem;
	}

	header p {
	  font-size: 1.1rem;
	}

	section h2 {
	  font-size: 1.9rem;
	}

	section p {
	  font-size: var(--font-size-small);
	}

	nav ul li {
	  margin: 0 15px;
	}

	section {
	  padding: 50px var(--padding-xsmall);
	}
}