
.home-container {
    background-color: #323e40;
    color: #fff;
    font-family: Arial, sans-serif;
  }
  
  .header {
    padding: 20px;
    text-align: center;
  }
  
  .main {
    padding: 20px;
  }
 
  
  
  .article-form {
    max-width: 500px;
    margin: 0 auto;
  
    h2 {
      text-align: center;
      margin-bottom: 20px;
      color: #323e40;
    }
  
    form {
      display: flex;
      flex-direction: column;

     

      input[type="text"],
      textarea {
        margin-bottom: 10px;
        padding: 10px;
        border: 1px solid #fff;
        background-color: transparent;
        color: #fff;
      }

      .publish-button {
        background-color: #497a6a;
        color: #fff;
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s ease;
      }
      
      .publish-button:hover {
        background-color: #749f77;
      }
      
    }
  }


  .footer {
    padding: 20px;
    text-align: center;
  }
  



//文章
body, html {
  height: 100%;
  margin: 0;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: rgb(222, 227, 227);
  height: 100vh;
  display: flex;
  flex-direction: column;

  h1 {
    color: #d68989;
    text-align: center;
    margin-bottom: 20px;
  }

  .article-list {
    height: 100%;
    overflow-y: scroll;

    

    .article {
      background: #8f9293;
      width: 80%; /* 设置文章的宽度 */
      height: 120px; /* 设置文章的高度 */
      border: 1px solid #aba7a7; /* 添加文章的边框 */
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
      padding: 10px;
      margin-bottom: 20px;

      h2 {
        font-size: 20px;
        margin-bottom: 10px;
      }

      p {
        margin-bottom: 10px;
      }

    }
  }
}

//文章

.article:hover {
  color: rgb(157, 209, 255); /* 设置文章的鼠标悬停颜色 */
  cursor: pointer; /* 设置鼠标悬停时的光标样式为小手 */
}

