Semantic HTML5 markup; Flexbox for layout management

What are you most proud of, and what would you do differently next time?

I learned the importance of using semantic tags like <main>, <section>, and <footer> to improve website structure and accessibility

What challenges did you encounter, and how did you overcome them?

CSS custom properties: I learned how to use CSS variables effectively to simplify color and style management.

:root {
  --primary-color: hsl(218, 44%, 22%);
  --secondary-color: hsl(220, 15%, 55%);
  --background-color: hsl(212, 45%, 89%);
  --container-color: hsl(0, 0%, 100%);
  --shadow-color: rgba(0, 0, 0, 0.1);
  --link-color: hsl(228, 45%, 44%);
  --font-family: "Outfit", sans-serif;
  --font-size: 15px;
  --header-font-size: 22px;
  --paragraph-font-size: var(--font-size);
}

body {
  background-color: var(--background-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 98vh;
  font-family: var(--font-family);
  font-size: var(--font-size);
}

What specific areas of your project would you like help with?

I feel like I don't have a 100% understanding of how to choose the space between lines in the text and the distance between letters. I have problems with this. I also have problems with determining the margins and padding.