/* 清除預設邊距和填充 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 基本樣式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 設定頁面全屏背景圖 */
body, html {
    height: 100%;
    font-family: Arial, sans-serif;
}

.hero-section {
    height: 100vh; /* 讓這一區塊填滿整個頁面 */
    background-image: url('../images/cryptography.png'); /* 請替換成背景圖片的路徑 */
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.hero-text {
    color: white;
    text-align: center;
    background: rgba(0, 0, 0, 0.5); /* 半透明黑色背景，讓文本更清晰 */
    padding: 20px;
    border-radius: 10px;
}

.hero-text h1 {
    font-size: 3em;
}


/* 讓 h1 和 h3 在同一行顯示 */
.inline-elements h1,
.inline-elements h3 {
    display: inline-block; /* 將元素設為行內塊 */
    margin: 0; /* 移除預設的外邊距 */
    padding: 0; /* 移除預設的內邊距 */
}

/* 根據需要設定間距 */
.inline-elements h1 {
    margin-right: 10px; /* 右側間距 */
}

.inline-elements h3 {
    margin-left: 10px; /* 左側間距 */
    font-weight: normal; /* 取消粗體顯示 */
}

/* Professor page main container */
.professor-container {
    display: flex;
    flex-direction: column;
    padding: 20px;
    margin-top: 30px;  /* 設定上半部的間距 */
    margin-bottom: 20px;  /* 設定下半部的間距 */
}

/* 照片和說明文字並排顯示 */
.professor-info {
    display: flex;
    align-items: flex-start; /* 確保內容在容器頂部對齊 */
    margin-bottom: 20px;
}

/* 照片部分 */
.professor-photo {
    flex: 1;
    max-width: 60%; /* 確保照片最多占一半寬度 */
    margin-right: 20px; /* 照片和文字之間的間距 */
    margin-left: 50px;
    display: flex;
    justify-content: center; /* 垂直對齊圖片 */
    position: relative; /* 使其可以進行微調 */
}

.professor-photo img {
    max-width: 80%; /* 設定圖片最大寬度，縮小圖片 */
    height: auto; /* 保持圖片的長寬比例 */
}

/* 文字部分 */
.professor-description {
    flex: 1;
}

/* 放大教授名稱 */
.professor-description h1 {
    font-size: 78px; /* 根據需要調整字型大小 */
    margin-bottom: 10px;
}

/* 放大教授副標題 */
.professor-description h3 {
    font-size: 24px; /* 根據需要調整字型大小 */
    margin-bottom: 10px;
    font-weight: normal; /* 取消粗體顯示 */
}

.professor-description h2 {
    font-size: 36px; /* 根據需要調整字型大小 */
    margin-bottom: 10px;
    font-weight: normal; /* 取消粗體顯示 */
}

/* 設置標題的樣式 */
.title {
    font-weight: bold;   /* 使標題文字變粗體 */
    font-size: 20px;     /* 設定標題字型大小 */
    margin-bottom: 5px;  /* 標題與內容之間的間距 */
    color: #4400ff;         /* 標題顏色 */
}

/* 設置內容的樣式 */
.content {
    font-size: 16px;     /* 設定內容字型大小 */
    margin-bottom: 15px; /* 內容與下一個項目之間的間距 */
    color: #000000;         /* 內容顏色 */
}

/* 內容文字 */
.context {
    font-size: 24px;
}

/* 直向選單和內容區域 */
.professor-details {
    display: flex;
}

.side-menu {
    width: 400px;  /* 直向選單的寬度 */
    margin-top: 70px;
    margin-left: 120px;
    position: relative; /* 讓我們可以使用 top 進行微調 */
    top: -10px; /* 調整此值以確保對齊 */
}

.side-menu ul {
    list-style-type: none;
    padding: 0;
}

.side-menu li {
    margin-bottom: 10px;
}

.side-menu a {
    text-decoration: none;
    text-align: left;
    color: #000;
    padding: 10px;
    display: block;
    background-color: #f0f0f0;
    border-radius: 4px;
    transition: background-color 0.3s;

}

.side-menu a:hover {
    background-color: #ddd;
}

/* 選單對應的內容區 */
.menu-content {
    margin-top: 30px;
    margin-left: 100px;
    flex: 1;
}

/* 確保內容區域的邊距和內邊距 */
.menu-content > div {
    padding: 20px; /* 調整內邊距以增加內容區域的空間 */
}

.menu-content > div {
    display: none;
}

/* 顯示 active 類別的內容 */
.menu-content > div.active {
    display: block;
}

.menu-content h3 {
    margin-bottom: 10px;
}