*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}

body {
  background-color: #1f2129;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.logo {
  width: 160px; /* 根据需要设置宽度 */
  height: auto; /* 保持图片的原始比例 */
  margin-top: 0px; /* 调整 logo 上方的间距 */
  margin-bottom: 60px; /* 调整 logo 下方的间距 */
}

h1 {
  font: 1.5rem Roboto, sans-serif;
  font-weight: 900;
  padding-bottom: 2rem;
  color: #f9802e;
  font-size: 38px;
}
h1 span {
  animation: load-text 1s infinite cubic-bezier(0.1, 0.15, 0.9, 1);
  display: inline-block;
}

h2 {
  font: 1.5rem Roboto, sans-serif;
  font-weight: 900;
  padding-bottom: 5rem;
  padding-top: 25px;
}
h2 span {
  animation: load-text 1s infinite cubic-bezier(0.1, 0.15, 0.9, 1);
  display: inline-block;
  color: #f9802e;
  font-size: 23px;
}

.progress-bar {
  background-color: #eaeaea;
  width: 300px;
  height: 25px;
  box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.25), 0px 1px 2px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  position: relative;
}
.progress-bar:after {
  content: "";
  background-color: green;
  position: absolute;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  animation: load 1.5s infinite linear;
}

/*** KEYFRAMES ***/
@keyframes load {
  0% {
    width: 5%;
    background-color: red;
  }
  25% {
    background-color: orange;
  }
  50% {
    background-color: yellow;
  }
  75% {
    background-color: lightgreen;
  }
  90% {
    background-color: green;
    width: 100%;
  }
}
@keyframes load-text {
  0% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(5px);
  }
  50% {
    transform: translateY(0px);
  }
  75% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0px);
  }
}