@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&family=IBM+Plex+Sans:wght@300;400;500;700&display=swap');

html {
    height: 100%;
    overflow-y: auto;
}

body {
    font-family: 'IBM Plex Sans', 'Noto Sans TC', sans-serif;
    margin: 0;
    padding: 20px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    line-height: 1.6;
}

.cards {
  display: flex;
  overflow-x: auto;
  gap: 20px;
  padding: 20px;
  scroll-snap-type: x mandatory;
  height: 400px;
  align-items: center;
}

.card {
  flex: 0 0 200px;
  height: 250px;
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform 0.3s ease;
}

.card:hover {
  color: black;
}

h2 {
  margin-bottom: 15px;
  font-style: italic;
}

p {
  line-height: 1.6;
}