main.css

*{
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  padding: 0;
  margin: 0;
  animation: color-change 0.5s infinite;
  background-color: white;
  color: black;
  font-family: Arial, sans-serif;
}

img {
  border-radius: 10px; /* 只让边角稍微圆润 */
  transition: transform 3s ease-in-out;
}

table{
  padding-top: 40px;
}

td{
  padding: 10px 15px;
}

.container{
  max-width: 1200px;
  margin: 0 auto;
}

.person-flex{
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #ccc;
}

.person-info{
  display: flex;
  flex-direction: column;
  padding: 0 50px;
}

.person-info > .person-name{
  font-size: 30pt;
  padding: 20px 0;
}

.person-info > .person-job{
  font-size: 16pt;
  letter-spacing: 20px;
  padding: 0 3px;
}


.person-introduction{
  display: flex;
  flex-direction: row;
  padding: 20px 40px;
  column-gap: 60px;
  font-size: 16pt;
}

.person-introduction > .title{
  font-size: 18pt;
}


.person-introduction > .description{
  font-size: 14pt;
  line-height: 1.5;
}


.person-experience{
  display: flex;
  flex-direction: row;
}


img:hover{
  transform: rotate(7200deg) scale(2);
}

#canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1; /* 把 canvas 放在所有内容的后面 */
  width: 100vw;
  height: 100vh;
}

.content {
  position: relative;
  z-index: 1; /* 确保内容在画布上方 */
  text-align: center;
  margin-top: 20%;
}

/* 暗黑模式的样式 */
body.dark-mode {
    background-color: #121212;
    color: white;
}

/* 样式按钮 */
button {
    padding: 10px 20px;
    margin: 20px;
    cursor: pointer;
}