@import url('https://fonts.googleapis.com/css?family=PT+Sans');

[data-theme='light'] {
    color-scheme: light only;
}

[data-theme='dark'] {
    color-scheme: dark only;
}

body {
  color-scheme: light dark;
  background: light-dark(white, black);
  padding: 0;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
}

h1 {
  color: light-dark(black, white); /* 字体颜色，和背景色相反 */
  font-size: 60px;
  text-align: center;
}

.timeline {
  position: relative;
  margin: 50px auto;
  /*padding: 40px 0; 我添加了图例所以不用这个padding来增加空白了*/
  width: 1000px;
  box-sizing: border-box;
}

.timeline:before {
  content: '';
  position: absolute;
  left: 50%;
  width: 2px;
  height: 100%;
  background: light-dark(black, white);
}

.timeline ul {
  padding: 0;
  margin: 0;
}

.timeline ul li {
  list-style: none;
  position: relative;
  width: 50%;
  padding: 20px 40px;
  box-sizing: border-box;
}

.timeline ul li:nth-child(odd) {
  float: left;
  text-align: right;
  clear: both;
}

.timeline ul li:nth-child(even) {
  float: right;
  text-align: left;
  clear: both;
}

.content {
  padding-bottom: 20px;
}

.timeline ul li:nth-child(odd):before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 24px;
  right: -9px;
  border-radius: 50%;
}

.timeline ul li:nth-child(even):before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 24px;
  left: -9px;
  border-radius: 50%;
}

.timeline ul li h3 {
  padding: 0;
  margin: 0;
  font-weight: 900;
}

.timeline ul li p {
  color: light-dark(black, white);
  margin: 10px 0 0;
  padding: 0;
}

.timeline ul li .time h4 {
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-weight: bold;
  color: light-dark(white, black);/* 时间颜色，这里和背景一样是因为我想要镂空效果 */
}

/*右侧时间*/
.timeline ul li:nth-child(odd) .time {
  position: absolute;
  top: 12px;
  right: -180px;
  margin: 0;
  width: 120px;
  padding: 8px 16px;
  color: #fff;
  border-radius: 18px;
  text-align: center;
}

/*左侧时间*/
.timeline ul li:nth-child(even) .time {
  position: absolute;
  top: 12px;
  left: -180px;
  margin: 0;
  width: 120px;
  padding: 8px 16px;
  color: #fff;
  border-radius: 18px;
  text-align: center;
}

@media (max-width: 1000px) {
  .timeline {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .timeline {
    width: 100%;
    padding-bottom: 0;
  }

  h1 {
    font-size: 40px;
    text-align: center;
  }

  .timeline:before {
    left: 20px;
    height: 100%;
  }

  .timeline ul li:nth-child(odd),
  .timeline ul li:nth-child(even) {
    width: 100%;
    text-align: left;
    padding-left: 50px;
    padding-bottom: 50px;
  }

  .timeline ul li:nth-child(odd):before,
  .timeline ul li:nth-child(even):before {
    top: -18px;
    left: 16px;
  }

  .timeline ul li:nth-child(odd) .time,
  .timeline ul li:nth-child(even) .time {
    top: -30px;
    left: 50px;
    right: inherit;
  }
}




/*时间条图例*/
.label {
  display: flex;          /* 启用 Flexbox */
  align-items: center;
  position: relative;
}

ul.label-content {
  position: relative;
  list-style: none;        /* 去掉默认的列表样式 */
  display: flex;           /* 使用 Flexbox 进行排列 */
  gap: 40px;               /* 设置每个项之间的间距 */
  padding: 0;              /* 去掉默认的 padding */
  margin: auto;               /* 去掉默认的 margin */
}

ul.label-content li {
  font-size: 14px;              /* 设置字体大小，可以根据需要调整 */
  font-weight: 900;            /* 设置字体粗细，可以根据需要调整 */
  padding: 10px 10px;           /* 为每个项添加内边距 */
  width: 100px;                  /* 宽度根据内容自动调整 */
  height: 15px;                 /* 设置固定的高度 */
  border-radius: 20px;          /* 设置圆角半径，调整为圆矩形 */
  color: light-dark(white, black); /* 设置字体颜色 */
  display: flex;
  justify-content: center;      /* 水平居中内容 */
  align-items: center;          /* 垂直居中内容 */
}

.label-content:after {
  content: '';
  position: absolute;
  top: 50%;                /* 垂直居中 */
  left: 50%;               /* 水平居中 */
  width: 450px;              /* 宽度为 500px */
  height: 5px;             /* 高度为 5px */
  transform: translate(-50%, -50%);  /* 确保它正好在容器的中间 */
  z-index: -1;             /* 让横线位于底层，不遮挡其他内容 */
}



/* 颜色改动 使用rgb方便每个类别统一调整颜色，不用16进制颜色是因为阴影需要用到rgba，
 调整的时候注意，使用替换方法的话，每个类别右8个有关于颜色的部分，如果超过或少于8个就是有问题*/

/* 图例线条 */
.label-content:after {
background: linear-gradient(to right, rgb( 255,99,71), rgb(238,154,0), rgb(60,179,113), rgb(32,178,170));
}

/* 学习经历 */
.study:nth-child(even):before, .study:nth-child(odd):before {
    background: rgb( 255,99,71);
    box-shadow: 0 0 0 5px rgba( 255,99,71, 0.3);
}

.study h3 {
  color: rgb( 255,99,71);
}

.study .time {
  background: rgb( 255,99,71);
  border-radius: 18px;
  box-shadow: 0 0 0 5px rgba( 255,99,71, 0.3);
}

.label-study{
    background: rgb( 255,99,71);
    box-shadow: 0 0 0 5px rgba( 255,99,71, 0.3);
}



/* 项目经历 */
.project:nth-child(even):before, .project:nth-child(odd):before {
  background: rgb(238,154,0);
  box-shadow: 0 0 0 5px rgba(238,154,0, 0.3);
}

.project h3 {
  color: rgb(238,154,0);
}

.project .time {
  background: rgb(238,154,0);
  border-radius: 18px;
  box-shadow: 0 0 0 5px rgba(238,154,0, 0.3);
}

.label-project{
    background: rgb(238,154,0);
    box-shadow: 0 0 0 5px rgba(238,154,0, 0.3);
}


/* 工作经历 */
.work:nth-child(even):before, .work:nth-child(odd):before {
  background: rgb(60,179,113);
  box-shadow: 0 0 0 5px rgba(60,179,113, 0.3);
}

.work h3 {
  color: rgb(60,179,113);
}

.work .time {
  background: rgb(60,179,113);
  border-radius: 18px;
  box-shadow: 0 0 0 5px rgba(60,179,113, 0.3);
}

.label-work{
    background: rgb(60,179,113);
    box-shadow: 0 0 0 5px rgba(60,179,113, 0.3);
}


/* 活动经历 */
.activity:nth-child(even):before, .activity:nth-child(odd):before {
  background: rgb(32,178,170);
  box-shadow: 0 0 0 5px rgba(32,178,170, 0.3);
}

.activity h3 {
  color: rgb(32,178,170); /* 设置标题颜色为绿色 */
}

.activity .time {
  background: rgb(32,178,170);
  border-radius: 18px;
  box-shadow: 0 0 0 5px rgba(32,178,170, 0.3);
}

.label-activity{
    background: rgb(32,178,170);
    box-shadow: 0 0 0 5px rgba(32,178,170, 0.3);
}



/* 隐藏滚动条 */

html, body {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

body::-webkit-scrollbar {
  width: 0;
  background: transparent;
}


/* debug */
/*
*{
    border: 1px solid red;
}
*/