/* static/css/style.css */

/* 通用樣式 */
body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    color: #333;
    margin: 0;
    padding: 0;
    height: 100%; /* 確保內容從頂端開始 */
}

/* 頁面頂部導航欄 */
header {
    background-color: #007bff;
    color: white;
    padding: 10px;
    text-align: right;
    font-size: 1.4rem;
}

.nav-left,
.nav-right {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
}

.nav-left {
    justify-content: flex-start; /* 保持靠左對齊 */
    align-items: center;
    position: absolute; /* 使用絕對定位 */
    left: 5px; /* 調整到距離左邊 10px */
}

.nav-right {
    justify-content: flex-end;
}

nav li {
    margin: 0 15px;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
}

nav a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s;
}

nav li:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

nav li:hover a {
    color: #ffeb3b;
}

/* 頁尾樣式 */
footer {
    padding: 15px;
    position: fixed;
    width: 100%;
    bottom: 0;
    text-align: center;
    background-color: transparent; /* 移除背景顏色 */
    visibility: hidden; /* 預設隱藏 */
    opacity: 0; /* 透明 */
    transition: opacity 0.3s ease; /* 過渡動畫 */
}

footer ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: inline-flex;
    justify-content: center;
}

footer li {
    margin: 0 15px;
    padding: 5px 10px;
    border-radius: 5px;
    transition: color 0.3s;
}

footer a {
    color: #000000;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2rem;
    transition: color 0.3s;
}

footer li:hover a {
    color: #007bff;
}

footer i {
    margin-right: 8px; /* 圖示與文字之間的間距 */
}


/* index.html */
.content {
    width: 80%;
    margin: 0 auto;
    margin-top: 40px;
    margin-bottom: 80px;
    padding: 50px;
    background-color: #ffffff; /* 白色背景 */
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 加上陰影效果 */
    font-size: 1.4rem; /* 將基準字體大小調整為 1.4 倍 */
}

.centered-title {
    text-align: center;
    margin: 0 auto;
    max-width: 800px; /* 限制寬度使內容更集中 */
    line-height: 1.5; /* 增加文字可讀性 */
}

.centered-text {
    text-align: left; /* 文字靠左對齊 */
    margin: 0 auto; /* 區塊居中 */
    max-width: 800px; /* 設置段落最大寬度 */
    line-height: 1.5; /* 提升行距可讀性 */
    padding: 10px; /* 增加內邊距使內容不顯擁擠 */
    text-indent: 2em; /* 設置段落首行縮進 */
}

.centered {
    text-align: center;
}

/* 調整 .technologies-wrapper 的樣式 */
.technologies-wrapper {
    display: flex; /* 使用 Flexbox 來讓內部元素橫向排列 */
    justify-content: space-between; /* 讓每個區塊之間保持適當距離 */
    gap: 20px; /* 區塊之間的間距 */
    margin-top: 30px; /* 距離上方內容的間距 */
}

/* 調整 .technologies 的樣式 */
.technologies {
    flex: 1; /* 讓每個 section 區塊均分可用空間 */
    min-width: 300px; /* 確保每個區塊的最小寬度，以免太窄 */

    padding: 20px; /* 增加區塊的內距 */
    border-radius: 10px; /* 圓角效果 */

    box-sizing: border-box; /* 包括內距和邊框到總寬度內 */
}

.technologies h3 {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #007BFF; /* 添加下劃線 */
}

.technologies ul {
    list-style-type: square;
    margin-bottom: 10px; /* 增加列表項之間的間距 */
}

/* 霧面遮罩層 */
#frosted-layer {
    position: fixed; /* 固定在視窗底部 */
    bottom: 0;
    left: 0;
    width: 100%; /* 覆蓋整個頁面寬度 */
    height: 100px; /* 高度可根據需要調整 */
    background: linear-gradient(to top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
    backdrop-filter: blur(0.5px); /* 添加霧面模糊效果 */
    pointer-events: none; /* 禁止鼠標交互 */
    z-index: 10; /* 保證遮罩層在最上方 */
    transition: opacity 0.3s ease; /* 添加顯示/隱藏過渡效果 */
    opacity: 1; /* 初始顯示霧面效果 */
}

/* 其他頁面的區塊內容 */
/* 項目容器 */
.project-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 20px auto;
    max-width: 1200px;
}

/* 每個方形區塊的樣式 */
.project-card {
    width: 320px;
    height: 360px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

/* 方形區塊的標題 */
.project-card h3 {
    font-size: 20px;
    color: #333;
    text-align: center;
}

/* Demo 連結和 Learn More 按鈕樣式 */
.demo-link,
.more-info {
    display: block;
    width: 60%;
    text-align: center;
    padding: 10px;
    margin-top: 10px;
    border-radius: 5px;
    text-decoration: none;
    color: white;
    background-color: #007bff;
    transition: background-color 0.3s;
}

.demo-link:hover,
.more-info:hover {
    background-color: #0056b3;
}

.demo-link.disabled {
    display: block;
    width: 60%;
    text-align: center;
    padding: 10px;
    margin-top: 10px;
    border-radius: 5px;
    text-decoration: none;
    color: #777;
    background-color: #ccc;
    transition: background-color 0.3s;
    cursor: not-allowed; /* 設定游標為禁止圖樣 */
}

.demo-link.disabled:hover {
    background-color: #bbb; /* 在懸停時更改背景顏色，保持在灰色階 */
    cursor: not-allowed; /* 滑鼠懸停時顯示禁止圖樣 */
}

/* 滑鼠移到方形區塊時的效果 */
.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* 專案描述文字的樣式 */
.project-card p {
    font-size: 14px;
    color: #555;
    margin: 10px 0;
    line-height: 1.5;
}

/* 調整專案圖片的樣式 */
.project-image {
    max-width: 100%;       /* 限制圖片最大寬度為父容器的 100% */
    height: auto;          /* 自動調整高度，保持等比例縮放 */
    display: block;        /* 讓圖片居中對齊父容器 */
    margin: 0 auto;        /* 圖片上下居中 */
    border-radius: 10px;   /* 圓角效果 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 陰影效果 */
    transition: transform 0.3s;
}

/* 滑鼠懸停圖片效果 */
.project-image:hover {
    transform: scale(1.05); /* 滑鼠懸停時放大效果 */
}

/* 調整 .project-card 的樣式 */
.project-card {
    width: 300px;
    height: auto;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}