*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  --green: #4caf50;
  --dark: #121212;
  --light: #808080;
  --white: #ffffff;
}
body {
  color: var(--white);
	font-family: 'Arial', sans-serif;
	line-height: 1.6;
	background-color: var(--dark);
  padding: 0 2rem;
  max-width: 1000px;
  margin: 0 auto;
}
header, footer {
	text-align: center;
	padding: 40px 20px;
}
header h1 {
  font-size: clamp(2.5rem, 8vw, 3.5rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  margin-bottom: 0.5rem;
}
header h1 span {
	color: var(--white);
}
header a:hover {
	text-decoration: none;
}
main h1 {
  margin: 30px 0 15px;
  border-bottom: 1px solid var(--light);
  padding-bottom: 5px;
}
main h2 {
  margin: 15px 0 5px;
}
footer p {
	margin: 15px 0;
}
footer a {
	color: var(--light);
}
a, h1, h2 {
	color: var(--green);
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}