#introduction {
  min-height: 50vh;
  display: flex;

  background-color: var(--accent-color);
}

@media (prefers-color-scheme: dark) {
  #introduction {
    background-color: color-mix(in srgb, var(--bg-color), black 25%);
  }
}

#introduction a {
  --underline-color: currentColor;
}

#introduction .segment-content {
  max-width: calc(var(--max-width) * 0.8);
}

#introduction .first-row {
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: center;
  align-items: center;
  gap: var(--medium-gap);
  margin-bottom: var(--medium-gap);
}

#introduction .main-text {
  flex: 3 20rem;
}

#introduction .portrait-circle {
  flex: 1 15rem;
  max-width: 20rem;
  transform: scaleX(-1);
}

#introduction .second-row {
  flex: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--medium-gap);
}