/* styles.css */
ul.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #07e;
    border-radius: 5px; /* 设置容器的边框圆角 */
    margin-bottom: 5px; /* 在下方添加5像素的间距 */
  }
  
  ul.navbar li {
    float: right;
    text-align: center;
  }
  
  ul.navbar li a {
    display: block;
    color: white;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  ul.navbar li a:hover {
    background-color: #334;
  }

  ul.navbar .logo {
    float: left;
    text-align: center;
    font-size: 32px;
    margin-left: 10px;
    margin-top: 2px;
    color: #adddfa;
  }

/* 媒体查询示例，用于特别窄的屏幕 */
@media (max-width: 500px) {
  ul.navbar {
      flex-direction: row; /* 保持水平方向 */
      justify-content: flex-end; /* 只显示一个导航项并右对齐 */
  }
  ul.navbar li:not(:nth-child(2)):not(:first-child) {
      display: none; /* 隐藏除了最后一个之外的所有导航项 */
  }
  ul.navbar li:last-child {
      flex: 0; /* 取消注释这一行，如果需要保持最后一个项的宽度不变 */
  }
}


.footer{
  text-align: center;
}
.footer input[type="text"] {
  flex-grow: 1;
  width: calc(90% - 80px); /* 假设发送按钮宽度为80px */
}
.footer button {
  width: 50px; /* 发送按钮宽度 */
}