body {
    font-family: Arial, sans-serif;
    text-align: center; /* 使body内的内容水平居中 */
    display: flex;
    flex-direction: column; /* 垂直布局 */
    align-items: center; /* 垂直居中（对于单行内容） */
    /*min-height: 100vh; !* 确保body至少占据整个视口高度 *!*/
    margin: 0;
    padding-top: 50px; /* 根据需要调整h1与顶部的距离 */
}

.container {
    max-width: 600px; /* 限制留言板容器的最大宽度 */
    width: 100%; /* 响应式宽度 */
    text-align: left; /* 重置文本对齐方式，如果需要的话 */
}

textarea {
    width: 100%;
    height: 100px;
    margin-bottom: 10px;
    font-weight: bold;
}

#messages {
    margin-top: 60px; /*边框线宽度*/
}


#messageForm textarea {
    width: 100%; /*边框宽度*/
    height: 100px; /*边框高度*/
    margin-bottom: 10px; /*按钮与边框的垂直距离*/
}

.message {
    background-color: #f4f4f4; /*删除栏的颜色*/
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}

.delete-button {
    float: right;
    cursor: pointer;
    color: red;
    background-color: #f0adad; /* 添加背景色 */
    border: none; /* 移除边框 */
    padding: 5px 10px; /* 添加内边距 */
    border-radius: 5px; /* 圆角 */
    margin-left: 10px; /* 与文本内容间隔 */
}

.delete-button:hover { /* 鼠标悬停效果 */
    background-color: #e09dad;
}
h1 {
    font-size: 48px;
    font-weight: 600;
    animation: rotate 0.3s ease infinite;
    width: fit-content; /* 确保h1的宽度适应其内容 */
    margin-bottom: 20px; /* 增加h1与留言板内容之间的垂直间距 */
}


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

            20% {
                transform: rotate(-2deg);
            }

            60% {
                transform: rotate(0);
            }

            80% {
                transform: rotate(2deg);
            }

            100% {
                transform: rotate(0);
            }
        }