main.css

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0px;
}

/*style social media icon*/
.fa-github, .fa-twitter{
  color: white;
  margin-right:8px;
  font-size:16px;
}

/* Style the header */
header {
  background-color:rgba(244,161,95,255);
  padding: 10px;
  text-align: center;
  font-size: 12px;
  color: rgba(231,110,83,255);
}

h1.banner{
text-shadow: 2px 2px orange; display: flex; align-items: center; font-size: 26px;
margin-bottom: 0px;
  margin-top: 0px;
}

.logo{
margin-right: 7px;margin-left: 8px;
height: 26px;
  width: 26px;
}

/* Create two columns/boxes that floats next to each other */
nav {
  float: left;
  width: 20%;
  background: rgba(234,197,100,255);
  padding: 0px;
}

a{
	text-decoration: none;
}

/* Style the list inside the menu */
nav ul {
  list-style-type: none;
  padding: 0;
}

nav ul .active{
	padding: 2px;
	background: #8B8000;
}

nav ul .none-active{
	padding: 2px;
	/*background: #8B8000;*/
}

nav ul .none-active:hover {
    background-color: #FFFFED; /* 滑鼠懸停時變色 */
  }

nav ul .active a{
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	padding: 10px;
	color: white;
}

nav ul .none-active a{
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	padding: 10px;
	/*color: white;*/
}

article {
  float: left;
  padding: 20px;
  width: 80%;
  background-color: rgba(40,158,144,255);
}

article a{
color: lightblue;
}

span.version{
	border-bottom:1px dotted black;
}
section {
  display: flex;
  align-items: stretch; /* 讓 nav 和 article 保持相同高度 */
}

/* Clear floats after the columns */
section::after {
  content: "";
  display: table;
  clear: both;
}

/* Style the footer */
   /* 固定底部的 footer */
    footer {
      background-color: rgba(41, 70, 86, 1); /* 設定背景顏色 */
      padding: 10px;
      text-align: center;
      color: white;
      /*position: relative;*/ /* 使用 relative 讓 footer 隨內容一起滾動 */
      width: 100%; /* 寬度佔滿全螢幕 */
      /*
position: fixed;
  bottom: 0;
  left: 0;*/
    }/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
  section {
    flex-direction: column; /* 變成直向排列 */
  }
  article,footer {
    width: 100%;
    height: auto !important;
  }
  nav {
    width: 100%;
    height: auto !important; /* 強制讓 nav 根據內容自適應 */
    min-height: unset !important; /* 移除任何 min-height 限制 */
    overflow: visible; /* 確保內容不被截斷 */
  }
 .horizontal-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .horizontal-list li {
    margin: 0 0px; /* Adjust spacing between items */
  }
}
/* 電腦版設定固定高度 */
@media (min-width: 601px) {
  nav {
  /*  height: 700px;*/ /* 只在大螢幕時使用固定高度 */
  }
  article{
/*    height: 700px;*/ /* only for demonstration, should be removed */
  }
 .horizontal-list {
margin: 0px;
  }
}
 /* 調整文字與圖片大小，使其更適應不同螢幕 */
  h2 {
    /*display: flex;
    align-items: center;
    font-size: 2rem;*/ /* 基本字體大小 */
    margin-top: 0px;
  /*margin-bottom: 0px;*/
  }

  h2 img {
    width: 30px;  /* 預設圖片大小 */
    height: 30px; /* 預設圖片大小 */
    margin-right: 10px;
  }

  /* 響應式設計：當螢幕寬度小於 768px 時，減小字型大小和圖片尺寸 */
  @media (max-width: 768px) {
    h2 {
      font-size: 1.5rem; /* 在較小螢幕上，減小文字大小 */
    }

    h2 img {
      width: 25px;  /* 較小螢幕上縮小圖片 */
      height: 25px; /* 較小螢幕上縮小圖片 */
    }
  }

  /* 響應式設計：當螢幕寬度小於 480px 時，進一步減小字型和圖片 */
  @media (max-width: 480px) {
    h2 {
      font-size: 1.2rem; /* 在手機上減小文字大小 */
    }

    h2 img {
      width: 20px;  /* 在手機上縮小圖片 */
      height: 20px; /* 在手機上縮小圖片 */
    }
  .button-container {
	flex-direction: column; /* 讓按鈕改為垂直排列 */
    }
  }
  .button-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      /*width: 80%;*/ /* 設定按鈕容器的最大寬度 */
      max-width: 600px; /* 限制最大寬度 */
    }
.button {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px 20px;
      margin: 10px;
      background-color:rgba(41,70,86,255);
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      width: calc(50% - 20px); /* 每行兩個按鈕，保持響應式 */
      box-sizing: border-box;
      transition: background-color 0.3s ease;
    }
.button img {
      width: 20px;
      height: 20px;
      margin-right: 10px;
    }

    .button:hover {
      background-color: rgba(30, 138, 124, 255);
    }

    /* 響應式設計：在較小螢幕（小於768px）下每行顯示一個按鈕 */
    @media (max-width: 768px) {
      .button {
        width: calc(100% - 20px); /* 每行一個按鈕 */
      }
    }  
      /* 響應式設計：圖片部分 */
    .image-container {
      width: 100%;
      text-align: center;
      margin-bottom: 20px; /* 圖片與按鈕間的間距 */
    }

    .image-container img {
      width: 100%;
      max-width: 600px; /* 限制圖片的最大寬度 */
      height: auto; /* 自動調整圖片高度，保持比例 */
    }