html, body {
  font-family: "Figtree", serif; 
  font-size: 16px;
  color: #383838;
  width: 80%;
  margin: auto;
  background-color: antiquewhite;
}

.nav-container {
  display: flex;
  align-items: center;
  padding: 1rem 2rem 0rem 2rem;
  border-bottom: 1px solid gray;
}

.nav-container h1 {
  font-size: 3rem;
  font-family: "Lemon", serif;
}

.nav-container nav {
  font-size: 1.2rem;
  margin-left: auto;
}

.navlinks {
  list-style: none; 
  display: flex;
  gap: 1.5rem; 
  padding: 0;
  margin-top: 2rem;
}

.main {
  padding: 1rem 23rem 2rem 2rem;
}

.underline {
  text-decoration: underline 1.5px olive;
}

.graphics {
  font-family: "Lemon", serif;
  padding: 0rem 2rem 2rem 2rem; 
}

.narratives {
  font-family: "Lemon", serif;
  padding: 0rem 2rem 2rem 2rem; 
}

.projects-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 1rem;
}

.project {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  /* 刪除固定高度，讓內容自動調整 */
  padding-top: 0.5rem;
  display: flex; /* 使項目可自動擴展 */
  flex-direction: column; /* 讓項目內部元素垂直排列 */
}

.project-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0.5rem;
  flex-grow: 1;
}

.project img {
  display: block; 
  font-family: "Figtree", serif;
  width: 100%; /* 保持圖片寬度為 100% */
  height: 200px; /* 設定固定高度 */
  object-fit: contain; /* 確保圖片填充容器且不失真 */
  margin: 0 auto; /* 居中圖片 */
}

.project h3 {
  font-family: "Figtree", serif;
  font-size: 1.5rem;
  margin: 1rem;
}

.project p {
  font-family: "Figtree", serif;
  margin: 0 1rem 1rem 1rem;
  font-size: 1rem;
  color: #555;
}

.project time {
  font-family: "Figtree", serif;
  margin: 0 1rem 1rem 1rem;
  font-size: 0.9rem; /* 調整時間行的字體大小 */
  color: #999; /* 調整時間行的顏色以增強可讀性 */
}

.project:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.link {
  text-decoration: none;
  color: inherit;
  position: relative; /* Ensure that the pseudo-element is positioned relative to the link */
  transition: background-color 0.3s ease; /* Smooth transition for background color */
}

.link:hover {
  background-color: peachpuff; /* Change background color on hover */
}

.footer {
  text-align: center; 
  margin: 2rem 0;
  font-family: "Figtree", serif;
}

.footer-text {
  color: grey;
}

/* 預設樣式 (桌面版) */
body {
  font-family: 'Figtree', sans-serif;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

.main {
  max-width: 800px;
  margin: 0 auto;
}

/* 平板 (768px 到 1024px) */
@media screen and (max-width: 1024px) {
  .nav-container {
    flex-direction: column;
    align-items: center;
  }
  
  .navlinks {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  
  .main {
    padding: 0 20px;
  }
}

/* 手機 (小於 768px) */
@media screen and (max-width: 768px) {
  h1 {
    font-size: 24px;
  }
  
  .nav-container {
    flex-direction: column;
    align-items: center;
    padding: 10px;
  }
  
  .navlinks {
    flex-direction: column;
    align-items: center;
  }

  .main {
    text-align: center;
    padding: 0 15px;
  }
  
  .projects-container {
    grid-template-columns: 1fr; /* 確保在小屏幕上使用單列顯示 */
  }
  
  .project {
    width: 100%;
    margin-bottom: 20px;
  }

  .footer {
    text-align: center;
  }
}