body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.navbar {
    background-color: rgb(63, 83, 182);
    color: white;
    padding: 10px 20px;
    text-align: center;
}

.navbar h1 {
    margin: 0;
}

.navbar p {
    margin: 10px 0;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 10px;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

.card-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 創建五個相等寬度的列 */
    gap: 10px; /* 設定卡片間的間隙 */
    padding: 20px;
}

.card {
    height: 200px;
    perspective: 1000px;
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column; /* 將內容垂直排列 */
    align-items: center; /* 中心對齊 */
    justify-content: center; /* 中心對齊 */
    background-color: white; /* 設定背景顏色 */
    border: 1px solid #ccc; /* 邊框 */
    border-radius: 10px; /* 邊框圓角 */
}

.card-front, .card-back {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.6s;
}

.card-front {
    background-color: white;
}

.card-back {
    background-color: lightgray;
    transform: rotateY(180deg);
}

.card:hover .card-front {
    transform: rotateY(180deg);
}

.card:hover .card-back {
    transform: rotateY(0deg);
}

.divider {
    height: 2px;        /* 分隔線的厚度 */
    background-color: rgb(255, 255, 255); /* 分隔線的顏色，這裡用靛青色來匹配導航欄 */
    border: none;       /* 確保沒有邊框 */
    margin: 20px 0;     /* 上下邊距為 20px */
}

.divider2 {
    height: 2px;        /* 分隔線的厚度 */
    background-color: rgb(0, 0, 0); /* 分隔線的顏色，這裡用靛青色來匹配導航欄 */
    border: none;       /* 確保沒有邊框 */
    margin: 20px 0;     /* 上下邊距為 20px */
}