body {
    background-image: url('resources/purpl132.jpg'); /* 指向 resources 文件夹里的图片 */
    background-size: auto;     /* 图片覆盖整个页面 */
    background-repeat: repeat; /* 不重复 */
    background-position: center center; /* 居中显示 */
    background-attachment: fixed; /* 可选：背景固定不随滚动 */
}


/* 外层容器：整个吐槽墙的盒子 */
.vent-container {
    width: 800px;                  /* 宽度为页面宽度的 90% */
    max-width: 2000px;            /* 最大宽度为 600px，不会太宽 */
    height:500px;
    margin: 50px auto;           /* 上下外边距 50px，水平居中 */
    background-color: rgba(0,0,0,0.6); /* 半透明黑色背景，让内容更突出 */
    padding: 20px;               /* 内边距 20px，内容不贴边 */
    border-radius: 10px;         /* 圆角边框，视觉更柔和 */
    text-align: center;          /* 容器内文字水平居中 */
}

/* 吐槽列表容器：显示所有吐槽条目 */
.vent-box {
    height: 420px;               /* 高度固定为 300px */
    overflow-y: auto;            /* 超过高度时显示垂直滚动条 */
    background-color: rgba(255,255,255,0.1); /* 半透明白色背景 */
    padding: 10px;               /* 内边距 10px，让条目不贴边 */
    border-radius: 5px;          /* 小圆角 */
    margin-bottom: 10px;         /* 底部外边距，让输入框和按钮分开 */
    display: flex;               /* 使用 flex 布局 */
    flex-direction: column;      /* 垂直排列每个吐槽条目 */
    gap: 5px;                    /* 条目之间间距 5px */
}

/* 每条吐槽内容样式 */
.vent-item {
    background-color: rgba(255,255,255,0.2); /* 半透明白色背景，让条目浮起来 */
    padding: 5px 10px;           /* 内边距，让文字不贴边 */
    border-radius: 5px;          /* 圆角边框 */
    text-align: left;            /* 左对齐文字 */
}

/* 吐槽删除按钮样式 */
.vent-item button {
    background-color: #c0392b;   /* 深红色背景 */
    border: none;                /* 去掉默认边框 */
    color: white;                /* 字体颜色白色 */
    padding: 2px 6px;            /* 内边距小巧 */
    border-radius: 3px;          /* 小圆角按钮 */
    cursor: pointer;             /* 鼠标悬停时显示手型 */
}

/* 删除按钮悬停效果 */
.vent-item button:hover {
    background-color: #e74c3c;   /* 鼠标悬停时变亮红色 */
}

/* 吐槽输入框样式 */
#ventInput {
    width: 70%;                  /* 宽度占 70% */
    padding: 8px;                /* 内边距 */
    border-radius: 5px;          /* 圆角 */
    border: none;                /* 去掉边框 */
    margin-right: 5px;           /* 右侧外边距，让按钮有间距 */
}

/* 吐槽发布按钮样式 */
#ventButton {
    padding: 8px 12px;           /* 内边距，上下 8px，左右 12px */
    border-radius: 5px;           /* 圆角按钮 */
    border: none;                 /* 去掉边框 */
    background-color: #6a0dad;    /* 紫色背景 */
    color: white;                 /* 白色文字 */
    cursor: pointer;              /* 鼠标悬停显示手型 */
}

/* 发布按钮悬停效果 */
#ventButton:hover {
    background-color: #8b2dc2;    /* 鼠标悬停时颜色变亮紫色 */
}


/* 响应式适配小屏幕 */
@media screen and (max-width: 1000px) {
    .vent-container {
        width: 400px;
        height: 500px;           /* 小屏幕适当缩短高度 */
        padding: 20px;
    }

    #ventInput {
        padding: 6px;
    }

    #ventButton {
        padding: 6px 10px;
    }
}