body {
    background-color: #fffafc;
    max-width: 700px;
    width: 100%;
    margin: 50px auto;
    padding: 0 20px; /* Prevents text from touching mobile screen edges */
    box-sizing: border-box;
}

h1 {
    font: montserrat;
    font-size: 45px;
    font-weight: bold;
}

h2 {
    font: montserrat;
    font-size: 25px;
    font-weight: bold;
}

summary h2 {
  display: inline-block; /* Forces text to sit next to the caret */
  vertical-align: middle; /* Aligns text perfectly with the center of the caret */
  margin: 0;
  padding: 10px 0;
}

p {
    text-align: justify;
}

.social-links {
  display: flex;         /* Lined up horizontally */
  justify-content: flex-start; /* Forces alignment to the far left */
  gap: 15px;             /* Adds clean spacing between each icon */
  margin-bottom: 15px;   /* Pushes the H1 header down slightly */
}

.social-links a {
  color: #555;           /* Subtle gray icon color */
  font-size: 20px;       /* Makes the icons easy to click/tap */
  text-decoration: none; /* Removes underline from links */
  transition: color 0.2s ease; /* Smooth hover transition */
}

/* Changes icon colors when you hover over them */
.social-links a:hover {
  color: #000;           /* Darkens to black on hover */
}