/* 這裡放 CSS */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background: #fffefedf;
      color: #333;
    }

    header {
      background: #021c1f97;
      color: white;
      padding: 20px;
      text-align: center;
    }



    nav ul {
      list-style: none;
      padding: 0;
      display: flex;
      justify-content: center;
      gap: 20px;
    }

    nav a {
      color: white;
      text-decoration: none;
      font-weight: bold;
    }

    nav a:hover {
      text-decoration: underline;
    }

    main {
      padding: 40px;
      text-align: center;
    }

    img {
      max-width: 100%;
      height: auto;
    }

  .pagetop{
      background: #8aafb397;
      color: white;
      font-size: 30px;
      padding: 20px;
      text-align: center;
      justify-content: center; /* 水平置中 */
      align-items: center;     /* 垂直置中 */
  }
  .content{
    padding: 20px;
    text-align: left;
  }
  .content h1 {
    color: rgb(16, 82, 45);
    margin-bottom: 20px;
  }
  .content ul {
    list-style: disc;
    margin-left: 20px;
  }

  /*both*/
  .both{
    display:flex;
    justify-content: center; /* 水平置中 */
    align-items: center;     /* 垂直置中 */
       gap: 20px; /* 圖片和文字的距離 */
       margin-bottom: 20px; /* 每個 section 底下加空隙 */
    }
    .both img {
      left: 0;
      max-width: 50%;
      height: auto;
    }

.both h2 {
  color: rgb(16, 82, 45);
}

.both ul {
  text-align: left; /* ✅ 確保標題和文字都是靠左 */
}
    .info{
      width:50%;
      display:flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 20px;
    }
    .info a {
      color: #021c1f97;
      text-decoration: none;
      font-weight: bold;
      margin-top: 10px;
    }

.btn {
  width: 30%;                  /* 內容區塊寬度 */
  margin: 20px auto;           /* ✅ 自動左右置中 */
  padding: 20px;
  border: 2px solid #00080997;      /* ✅ 外框 */
  border-radius: 12px;         /* ✅ 圓角 */
  background-color: #021c1f97;   /* ✅ 背景色 */
  text-align: center;          /* ✅ 文字置中 */
  box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* ✅ 陰影讓它更立體 */
}

.btn a {
  color: #f7f8f8;             /* ✅ 字體顏色深一點 */
  text-decoration: none;
  font-weight: bold;
}

.btn a:hover {
  color: #0077cc;              /* ✅ 滑鼠移上去有變色 */
  border-radius: 54px; 
}

/*文章標題 → class="title"

作者名字 → class="author"

整個文章區塊 → class="result"*/
.articles{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  text-align: left;
  justify-content: flex-start;
}
.articles a{
  text-decoration: none;
  color: #021c1f97;
}
.articles a:hover{
  color: #0077cc;
}
.title{
  font-size: 1.2rem;
  font-weight: bold;
  color: #021c1f97;
  text-align: center;
  justify-content: flex-start;
}
.author{
  font-size: 1rem;
  color: #555;
}
.result{
  background:#fff; 
  padding:15px; 
  margin-bottom:12px; 
  border-radius:8px; 
  box-shadow:0 2px 5px rgba(0,0,0,0.1); 
}

    footer {
      background: #9e7005;
      padding: 20px;
      text-align: center;
      font-size: 0.9rem;
      color: #130d01;
    }