@charset "utf-8";

body {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  background: linear-gradient(to right, #20232b, #0c0e12);
}

/* 功能样式 */
.stroke {
  text-shadow: #fff -1px -1px, #fff 1px -1px, #fff -1px 1px, #fff 1px 1px;
}

/* 网格背景 */
.grid-bg {
  position: fixed;
  z-index: -1;
  height: 100%;
  width: 100%;
  /* 2px 的网格 */
  background: linear-gradient(to right, transparent 30px, #1b1c22),
    linear-gradient(to bottom, transparent 30px, #1b1c22);
  background-size: 32px 32px;
}

.main {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  /* margin: 120px 90px 0; */
  margin: 0 90px;
  height: 100%;
}

/* main - 介绍部分 */
.main .intro {
  /* display: flex; */
  flex-flow: column;
  justify-content: center;
}

.intro .nickname {
  font-size: 120px;
  line-height: 120px;
  color: #20232b;
}

.intro .alias {
  margin: 20px 0;
  font-size: 48px;
  line-height: 48px;
}

.intro .motto {
  display: flex;
  flex-flow: column;
  font-size: 16px;
  line-height: 24px;
  color: #707690;
}

.motto > span {
  text-indent: 2em;
  /* align-self: flex-end; */
}

.intro .list {
  margin-top: 24px;
  color: #526bcf;
  font-size: 18px;
  font-weight: 600;
}

.list li {
  display: inline-block;
}

.list li::after {
  content: "//";
  display: inline-block;
  margin: 0 18px;
}

.list a {
  color: #526bcf;
}

/* main - 小孤独 */
.main .bocchi {
  display: flex;
  justify-content: space-between;
  /* align-items 默认值 stretch 会拉伸图片 */
  align-items: center;
  margin-left: 80px;
  /* margin-top: -100px; */
  max-width: 485px;
}

.bocchi > img {
  width: 260px;
}

.bocchi .tag {
  color: #ff2291;
  font-size: 20px;
  /* rt 字体大小默认为 ruby 的 50%，行高约为字体的 1.2 倍，估计总行高为 24+12=36 */
  line-height: 40px;
}

/* 底部信息 */
.footer {
  position: fixed;
  bottom: 0;
  right: 0;
  display: flex;
  flex-flow: column;
  margin: 60px 90px 0;
  padding-bottom: 60px;
  text-align: right;
  font-size: 16px;
}

.footer .time-span {
  margin-bottom: 8px;
}

.footer a,
.footer em {
  font-size: 14px;
  color: #707690;
}

.footer > em {
  margin-bottom: 2px;
}
.footer > em.filing {
  display: flex;
  flex-wrap: wrap;
  justify-content: right;
  gap: 0 12px;
  /* 文字不换行 */
  white-space: nowrap;
}
.footer > em.filing a {
  display: inline-flex;
  align-items: center;
  gap: 0 0.2rem;
}
.footer > em.filing img {
  /* position: relative;
  bottom: -0.5px; */
  width: 14px;
}

/* 媒体查询 */
@media screen and (max-width: 1124px) {
  .main {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 120px;
    height: auto;
  }

  .main .bocchi {
    margin-left: 10px;
    margin-top: 20px;
  }

  .footer {
    position: static;
    bottom: auto;
    right: auto;
  }
}

@media screen and (max-width: 780px) {
  .intro .nickname {
    font-size: 90px;
    line-height: 90px;
  }

  /* .intro .alias {
    margin: 18px 0;
  } */
}

@media screen and (max-width: 648px) {
  .main {
    margin: 120px 45px 0;
    /* margin: 90px 45px 0; */
  }

  /* 介绍部分 */
  .intro .nickname {
    font-size: 72px;
    line-height: 72px;
  }

  .intro .alias {
    font-size: 38px;
    line-height: 38px;
  }

  .intro .list {
    margin-top: 20px;
    font-size: 16px;
  }

  .main .bocchi {
    flex-direction: column;
  }

  .bocchi .tag {
    margin-top: 40px;
  }

  .footer {
    margin: 60px 45px 0;
  }
}

@media screen and (max-width: 450px) {
  .intro .nickname {
    font-size: 60px;
    line-height: 60px;
  }

  .intro .alias {
    font-size: 32px;
    line-height: 32px;
  }
}

@media screen and (max-width: 400px) {
  .intro .nickname {
    font-size: 52px;
    line-height: 52px;
  }

  .intro .alias {
    font-size: 24px;
    line-height: 24px;
  }
}

@media screen and (max-width: 350px) {
  .main {
    margin: 120px 40px 0;
    /* margin: 90px 40px 0; */
  }

  .intro .nickname {
    font-size: 48px;
    line-height: 48px;
  }
}