style.css

/* Tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements. */
* {
  box-sizing: border-box;
}

/* Sets the minimum height of the body element to 100% of the viewport height, increases the line height for better legibility, and changes the font family to a system font stack. */
body {
  min-height: 100vh;
  line-height: 1.5;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

/* Reduces the line height of heading elements and wraps their text in a way that best balances the number of characters on each line, enhancing layout quality and legibility. */
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.1;
  text-wrap: balance;
}

/* Makes sure that images can't break outside their parent element. Their maximum width is 100% of their parent element's width. */
img {
  max-width: 100%;
}

/* Removes the underline from the navigation links. */
nav a {
  text-decoration: none;
}

/* Underlines the navigation links on hover. */
nav a:hover {
  text-decoration: underline;
}

/* Underlines the active navigation link. */
[aria-current="page"] {
  text-decoration: underline;
}