@import url('https://fonts.googleapis.com/css?family=PT+Sans');
*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


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

html, body {
  color-scheme: light dark;
  background: light-dark(white, black);
  width: 100%;
  height: 100%;
  font-family: "PT Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.item-canvas {
  display: flex;
  justify-content: space-between; /* 左右分布 */
  align-items: center; /* 垂直居中 */
  width: 70%; /* 可根据实际需要调整宽度 */
  margin: auto; /* 水平居中 */
  min-height: 100vh; /* 使容器至少占满视口高度，便于垂直居中 */
}

.intro-canvas { /* 占据剩余空间的一部分 */
  text-align: justify; /* 文字自动排布 */
  font-size: 1.2em;
  line-height: 1.5;
  margin-left: 5%;
  width: 40%
}

.name {
    font-size: 3em;
    font-weight: bold;
    color:#f26422
}


.skills-bar-container {
  margin-right: 5%;
  width: 40%;
  min-width: 100px;
  list-style: none;
}

.skills-bar-container li {
  position: relative;
  width: 100%;
  padding: 5px;
  margin-bottom: 10px;
}

.skills-bar-container li .progressbar-title {
  color: light-dark(black, white); #这里是反过来的，因为文字和背景是相反的
}
.skills-bar-container li .progressbar-title h3 {
  display: inline-block;
}
.skills-bar-container li .progressbar-title .percent {
  position: absolute;
  right: 5px;
  font-weight: bold;
}
.skills-bar-container li .bar-container {
  background: #555;
  position: relative;
  width: 100%;
  height: 5px;
  margin-top: 5px;
  display: block;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
}
.skills-bar-container li .bar-container .progressbar {
  position: absolute;
  width: 0%;
  height: 100%;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}


/* -------------------- Python -------------------- */
/* 颜色 */
.color-python {
  background-color: #3b73a1;
}
/* 动画绑定 */
.skills-bar-container li .bar-container #progress-python {
  -webkit-animation-name: progress-python;
  animation-name: progress-python;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
/* keyframes */
@-webkit-keyframes progress-python {
  0% { width: 0%; }
  100% { width: 100%; }
}
@-moz-keyframes progress-python {
  0% { width: 0%; }
  100% { width: 100%; }
}
@keyframes progress-python {
  0% { width: 0%; }
  100% { width: 100%; }
}

/* -------------------- Java -------------------- */
/* 颜色 */
.color-java {
  background-color: #e02629;
}
/* 动画绑定 */
.skills-bar-container li .bar-container #progress-java {
  -webkit-animation-name: progress-java;
  animation-name: progress-java;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
/* keyframes */
@-webkit-keyframes progress-java {
  0% { width: 0%; }
  100% { width: 70%; }
}
@-moz-keyframes progress-java {
  0% { width: 0%; }
  100% { width: 70%; }
}
@keyframes progress-java {
  0% { width: 0%; }
  100% { width: 70%; }
}

/* -------------------- Linux -------------------- */
.color-linux {
  background-color: #ffb508;
}
.skills-bar-container li .bar-container #progress-linux {
  -webkit-animation-name: progress-linux;
  animation-name: progress-linux;
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}
@-webkit-keyframes progress-linux {
  0% { width: 0%; }
  100% { width: 100%; }
}
@-moz-keyframes progress-linux {
  0% { width: 0%; }
  100% { width: 100%; }
}
@keyframes progress-linux {
  0% { width: 0%; }
  100% { width: 100%; }
}

/* -------------------- PHP -------------------- */
.color-php {
  background-color: #7b7fb5;
}
.skills-bar-container li .bar-container #progress-php {
  -webkit-animation-name: progress-php;
  animation-name: progress-php;
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}
@-webkit-keyframes progress-php {
  0% { width: 0%; }
  100% { width: 50%; }
}
@-moz-keyframes progress-php {
  0% { width: 0%; }
  100% { width: 50%; }
}
@keyframes progress-php {
  0% { width: 0%; }
  100% { width: 50%; }
}

/* -------------------- HTML -------------------- */
.color-html {
  background-color: #ed652f;
}
.skills-bar-container li .bar-container #progress-html {
  -webkit-animation-name: progress-html;
  animation-name: progress-html;
  -webkit-animation-delay: 1.0s;
  animation-delay: 1.0s;
}
@-webkit-keyframes progress-html {
  0% { width: 0%; }
  100% { width: 90%; }
}
@-moz-keyframes progress-html {
  0% { width: 0%; }
  100% { width: 90%; }
}
@keyframes progress-html {
  0% { width: 0%; }
  100% { width: 90%; }
}

/* -------------------- SQL -------------------- */
.color-sql {
  background-color: #bcd638;
}
.skills-bar-container li .bar-container #progress-sql {
  -webkit-animation-name: progress-sql;
  animation-name: progress-sql;
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}
@-webkit-keyframes progress-sql {
  0% { width: 0%; }
  100% { width: 70%; }
}
@-moz-keyframes progress-sql {
  0% { width: 0%; }
  100% { width: 70%; }
}
@keyframes progress-sql {
  0% { width: 0%; }
  100% { width: 70%; }
}


/* -------------------- Sample -------------------- */
/*
.color-sample {
  background-color: #27ae60;
}
.skills-bar-container li .bar-container #progress-sample {
  -webkit-animation-name: progress-sample;
  animation-name: progress-sample;
  -webkit-animation-delay: 3.0s;
  animation-delay: 3.0s;
}
@-webkit-keyframes progress-sample {
  0% { width: 0%; }
  100% { width: 65%; }
}
@-moz-keyframes progress-sample {
  0% { width: 0%; }
  100% { width: 65%; }
}
@keyframes progress-sample {
  0% { width: 0%; }
  100% { width: 65%; }
}
*/

/* 默认暂停所有进度条动画 */
.skills-bar-container li .bar-container .progressbar {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

/* 当容器有 .playing 时，动画运行 */
.skills-bar-container.playing li .bar-container .progressbar {
  -webkit-animation-play-state: running;
  animation-play-state: running;
}


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