h1, h2, h3, h4, h5, h6 {
  text-align: center;
}

span {
  display: inline;
}

footer {
  text-align: center;
  background-color: black;
  color: white;
  border-radius: 8px;
}

footer.dark-mode {
  /* 深色模式下的样式 */
  background-color: #303030;
}

div {
  text-align: center;
  font-size: 1.75rem;
  background-color: #000000;
  color: #ffffff;
  border-radius: 12px;
}

div.dark-mode {
  /* 深色模式下的样式 */
  background-color: #303030;
}

img {
  border-radius: 100%;
  animation: rotate 10s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

body {
  /* 默认浅色模式下的样式 */
  background-color: #ffffff;
  color: #000000;
  transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-mode {
  /* 深色模式下的样式 */
  background-color: #303030;
  color: #ffffff;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #303030;
  color: #ffffff;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.button.dark-mode {
  background-color: #ffffff;
  color: #303030;
}

.button:hover {
  background-color: #ffffff;
  color: #303030;
}

.button.dark-mode:hover {
  background-color: #303030;
  color: #ffffff;
}

.button:active {
  transform: scale(0.95);
}

.button.dark-mode:active {
  transform: scale(0.95);
}

#site-image-1, #site-image-2, #site-image-3, #img, #bilibili-image1, #ChatGPT-image1, #cloudflare-image1 {
  border-radius: 0%;
  animation: rotate linear infinite;
  width: 16px;
  height: 16px;
}
select, option {
  border-radius: 16px;
  background-color: #303030;
  color: #ffffff;
  padding: 10px 10px;
  position: fixed;
  bottom: 20px;
}