/* 自定义样式 - 通过 assets/sass/vars.scss 控制页面宽度 */

/* 限制图片大小，便于阅读 */
.content img {
  max-width: 80% !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 移动端图片占满宽度 */
@media screen and (max-width: 768px) {
  .content img {
    max-width: 100% !important;
  }
}

/* 主页布局：自我介绍在左，头像与链接在右 */
.home-layout {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  align-items: flex-start;
}

.home-intro {
  flex: 1;
}

.home-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

/* 方形头像 */
.avatar {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border: 3px solid var(--fg4);
}

/* 移动端改为上下布局 */
@media screen and (max-width: 768px) {
  .home-layout {
    flex-direction: column;
    align-items: center;
  }

  .home-intro {
    width: 100%;
  }
}

/* 社交链接 */
.social-links {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg4);
  transition: color 0.3s;
}

.social-link:hover {
  color: var(--fg1);
}

.social-link svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
}