html,
body {
  background-color: #e8ffbb;
  font-family: "Times New Roman", serif;
  font-size: 20px;
  padding: 40px;
  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;  

}

.txt-poem {
  font-weight: bold;
  color: #048506;
  text-align: left;
  filter: blur(1px)

}



/* 餐桌 */
.row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  /* ^ 横向: flex-start / center / flex-end / space-between */
  align-items: center;
  /* ^ 纵向: flex-start / center / flex-end / stretch */
  gap: 10px;
  flex-wrap: wrap;
  /* ^ 挤满是否换行: wrap / nowrap */

  max-width: 500px;  
  width: 100%;        
  margin: 0 auto;    

  background-color: white;
  border: 3px solid #e4e4e4;
  border-radius: 1000px;
  padding: 20px;
  margin-bottom: 30px;
  gap:50px
}

.row2 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  /* ^ 横向: flex-start / center / flex-end / space-between */
  align-items: center;
  /* ^ 纵向: flex-start / center / flex-end / stretch */
  gap: 10px;
  flex-wrap: wrap;
  /* ^ 挤满是否换行: wrap / nowrap */

  max-width: 1000px;  
  width: 100%;        
  margin: 0 auto;    

  background-color: white;
  border: 3px solid #e4e4e4;
  border-radius: 1000px;
  padding: 20px;
  margin-bottom: 30px;
  gap:50px
}

/* 小盘子 */
.box {
  width: 180px;
  height: 150px;
  border-radius: 80px;
  background-color: #ff8fb1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box2 {
  width: 200px;
  height: 150px;
  border-radius: 480px;
  background-color: #229cd9;
  display: flex;
  padding: 10px;
  justify-content: center;
  align-items: center;
}
.box3 {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  padding: 20px;
  background-color: #22d9be;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box4 {
  width: 180px;
  height: 150px;
  border-radius: 480px;
  padding: 30px;
  background-color: #22d9be;
  display: flex;
  justify-content: center;
  align-items: center;
}

.n{
  margin: 0%;
  padding:0%;
}

.box5{
  width: 200px;
  height: 200px;
  border-radius: 200px;
  padding: 20px;
  background-color: #c8ff2f;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
}
.box6{
  width: 100px;
  height: 100px;
  border-radius: 200px;
  padding: 20px;
  background-color: #ff2f2f;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
}

.box7{
  width: 150px;
  height: 150px;
  border-radius: 100px;
  padding: 20px;
  background-color: #ffcdb0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
}

.box8{
  width: 150px;
  height: 10px;
  /* border-radius: 100px; */
  padding: 20px;
  background-color: #7c3004;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
  color:#c8ff2f
}

.box9{
  width: 150px;
  height: 150px;
  border-radius: 40px;
  padding: 7%;
  background-color: #ee4c8d;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 50px;

}

/* 1.旋转 */
.rotating-text-container {
    color: #f0900a;
    text-align: center;
    transform-origin: center center;
    animation: spin 10s linear infinite;
    /* 鼠标悬停在linear infinite，点击MDN Reference查看更多效果 */
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* 2. 滑入 */
.sliding-text-container {
    font-size: 20px;
    /*把bold 改成100 或 400 或其他数字*/
    color: #6cac4f;
    /*可选不同颜色*/
    animation: slide-in 5s linear infinite;
    /* 把10s修改成2s或20s试试 */

}

@keyframes slide-in {
    from {
        margin-left: 100%;
        width: 100%;
    }

    to {
        margin-left: 0%;
        width: 0%;
    }
}