/* 全域設定 */
html{
  background-color: #B2CDD8;
}


.question {
  background-color: #E8F0F3; 
  padding: 1rem;          /* 內距，文字不會緊貼邊緣 */
  margin-bottom: 1rem;    /* 與下一個區塊的距離 */
  border-radius: 8px;       /* 圓角 */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 淡淡的陰影 */
}

/* 標題區 */




/* 1. 讓 header 固定在頂端 */

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #91B6C6;
  color: white;
  display: flex;               /* 改用 flex 排版 */
  justify-content: center;     /* 水平置中 */
  align-items: center;         /* 垂直置中 */
  padding: 5px 20px;
  z-index: 1000;
  box-sizing: border-box;      /* 避免 padding 撐爆寬度 */
  font-size: clamp(1rem, 1.2vw, 1.5rem);
}

@media (max-width: 600px) {
  header {
    font-size: 0.6rem;
  }
}

/* 2. 給 body 預留空間，避免內容被 header 蓋住 */


body {
  font-family: Arial, sans-serif; /* 字型 */
  line-height: 1.6;               /* 行距 */
  max-width: 800px;               /* 網頁寬度 */
  margin: auto;                   /* 置中 */
  padding: 20px;
  padding-top: calc(7.5rem + 10px);    /* 大於 header 的高度 */
  background: #fdfdfd;
}

@media (max-width: 600px) {
  header {
    font-size: 0.6rem;
  }
  body {
    padding-top: calc(4.8rem + 2px);
  }


}


/* 小標題 */

h2 {
  color: #4D7180;
  margin-top: 0.5rem;
  border-left: 4px solid #719EB2; /* 左邊色線 */
  padding-left: 0.5rem;
  margin-bottom: 0.5rem;
}
p {
  text-align: justify; 
  color: #324252;
}

.link-group {
  display: flex;
  gap: 20px;         /* 兩個連結之間的距離 */
  justify-content: center; 
  margin-top: 20px;
}

.my-link {
  border: 2px solid #719EB2;
  padding: 5px 16px;
  border-radius: 8px;
  color: #324252;
  text-decoration: none;
  transition: all 0.3s;
}
.my-link:hover {
  background-color: #719EB2;
  color: white;
}

footer {
  text-align: center;
  background: #f5f5f5;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}