body {
    font-size: 1.2rem;
    font-family: sans-serif;
    color: #fff;
}
  
.blurred-wrapper {
    position: relative;
    overflow: hidden;
}

.blurred-wrapper::before {
    content: "";
    background: url(./background.jfif) center/cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: blur(2rem);
    transform: scale(1.15);
    z-index: -1;
    animation: hue 10s infinite alternate;
}

@keyframes hue {
    from {
        filter: hue-rotate(0);
    }
    to {
        filter: hue-rotate(360deg);
    }
}

.blur-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5rem); /* 设置高斯模糊的程度 */
    -webkit-backdrop-filter: blur(5rem); /* 兼容Safari浏览器 */
}

.logo {
    color: #fff;
    /*text-transform: uppercase;*/
    font-size: 2.5rem;
    font-weight: bold;
}
  

header {
    background: #f0f0f000;
    padding: 10px 20px;
    text-align: center;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {

    display: inline;
    margin-right: 10px;
}

section {
    background: #f0f0f035;
    margin: 20px;
    padding: 20px;
    border: 0px solid #ccc;
    border-radius: 20px;
}

#messageForm input, #messageForm textarea {
    margin-bottom: 10px;
    display:block;
    width: 300px;
    border-radius: 20px;
}

#nickname,
#message {
    position: relative;
    z-index: 1;
    height: 50px; /* 设置昵称输入框的高度为 20px */
    margin-bottom: 10px; /* 添加下外边距，与您提供的样式一致 */
    /*display: block;  将输入框设置为块级元素，与您提供的样式一致 */
    width: 300px; /* 设置输入框的宽度为 300px，与您提供的样式一致 */
    border-radius: 20px; /* 设置输入框的边框圆角为 20px，与您提供的样式一致 */
    padding: 10px; /* 设置输入框的内边距为 10px，与您提供的样式一致 */
    box-sizing: border-box; /* 让 padding 和 border 不会增加输入框的实际宽度，保持宽度为 300px */
    text-align: left; /* 将文字水平对齐方式设置为左对齐 */
    line-height: 20px; /* 设置行高等于输入框的高度，使文字垂直居上 */
    vertical-align: top; /* 将文字垂直对齐方式设置为顶部对齐 */
    font-size: 16px;
}

#message {
    position: relative;
    z-index: 1;
    height: 100px; /* 设置留言内容输入框的高度为 100px */
}


.button {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 10px 20px;
    margin: 10px;
    background-color: #007BFF;
    color: rgb(0, 0, 0);
    text-shadow: 1px 1px 0 #8d8d8d;
    text-decoration: none;
    border-radius: 20px;
}

.button2 {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 10px 20px;
    margin: 10px;
    background-color: #007BFF;
    color: rgb(255, 255, 255);
    text-shadow: 1px 1px 0 #8d8d8d;
    text-decoration: none;
    border-radius: 20px;
}

button[type="submit"] {
    position: relative;
    z-index: 1;
    margin-bottom: 10px;
    display: block;
    width: 130px;
    border-radius: 20px;
    background-color: #3498db;
    color: #ffffff;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

button[type="submit"]:hover {
    position: relative;
    z-index: 1;
    background-color: #2980b9;
}