@import url(reset.css);
/* CSS Variables */
:root {
  --primary-color: hsl(190, 100%, 70%);
  --secondary-color: #ffb71d;
  --text-color: #333;
  --sec-text-color: #fff;
  --font-family: Arial, sans-serif;
  --title-font: "Baloo Bhaijaan", cursive; /* 添加艺术字体 */
  --background-color: #f3f2f2;
  --section-bg1: #ffffff; /* white */
  --section-bg2: #e0e0e0; /* light gray */
  --bgImage: url("../images/my/girl 2.png") center center / cover; /* Add your image */
}

body {
  margin: 0;
  font-family: var(--font-family);
  background-color: var(--background-color);
}

/* Splash Page Styles */
.splash-container {
  position: relative;
  height: 100vh;
}

.splash-image {
  background: var(--bgImage);
}

.splash-content {
  position: relative;
  height: 100%; /* 高度占满容器 */
}

/* Splash Navigation */
.splash-nav {
  position: absolute;
  top: 20px; /* 距离顶部 */
  left: 20px; /* 距离左侧 */
}

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

.splash-nav ul li {
  margin-bottom: 10px;
}

.splash-nav ul li a {
  color: var(--sec-text-color);
  text-decoration: none;
  font-size: 18px; /* 设置大小 */
  transition: background-color 0.3s ease; /* 平滑过渡 */
}

.splash-nav ul li a:hover {
  color: var(--primary-color);
}

/* Splash Title */
.splash-title {
  position: absolute;
  bottom: 50px; /* 距离底部 */
  left: 30px; /* 距离左侧 */
  font-family: "Baloo Bhaijaan", sans-serif; /* 字体 */
  font-size: 9rem; /* 字体大小 */
  font-weight: 700; /* 加粗 */
  color: var(--sec-text-color);
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* 阴影 */
  margin: 0;
  line-height: 0.9; /* 调整行高为1.1，减小行距 */
  text-align: left; /* 左对齐 */
 
}

.splash-title img{
  width: 50vw;
}

/* Custom Styles for Tasks Container */
.tasks-container {
  max-width: 1200px; /* Limit max width for desktop */
  margin: 0 auto; /* Center the container */
  padding: 20px;
}

.tasks-container .content {
  column-count: 3; /* Default for desktop */
  column-gap: 20px; /* Space between columns */
}

.placeholder-image {
  width: 100%; /* Full width for image */
  height: auto; /* Maintain aspect ratio */
  border-radius: 8px; /* Rounded corners */
  display: block; /* Ensure it behaves like a block element */
  margin-bottom: 15px; /* Space below the image */
}

p {
  line-height: 1.6; /* Improve readability */
}

/* General Navigation Styles */
nav {
  width: auto;
  height: auto;
  margin-top: 20px;
}

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center; /* Center the menu items */
  flex-direction: column;
}

nav ul li {
  margin: 0 15px;
  position: relative; /* Needed for dropdown */
}

/* Dropdown Menu for General Navigation */
nav ul li ul {
  display: none; /* Hide dropdown initially */
  position: absolute; /* Position it relative to the parent */
  top: 100%; /* Place it below the parent */
  left: 0;
  background-color: var(--secondary-color);
  border-radius: 5px; /* Rounded corners */
  padding: 10px;
  width: 150px;
}

nav ul li ul li {
  width: 100%;
  height: 50px;
  line-height: 40px;
}
nav ul li:hover ul {
  display: block; /* Show dropdown on hover */
}

nav a {
  color: var(--sec-text-color);
  text-decoration: none;
  font-size: 18px; /* Set a font size for links */
  padding: 5px 10px; /* Add some padding */
  transition: background-color 0.3s ease; /* Smooth background change */
}

nav a:hover {
  background-color: var(--secondary-color); /* Change background on hover */
  border-radius: 5px; /* Rounded corners */
}

nav ul li ul li a:hover {
  background-color: var(--primary-color); /* Change background on hover */
  width: 100%;
  height: auto;

  border-radius: 5px; /* Rounded corners */
}

header {
  background-color: #000;
  padding: 20px;
  text-align: center;
  color: var(--secondary-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3vw;
  font-size: 3vw;
}

header a img {
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
}

header h1 img{
  height: 5vw;
}

.task11{
  background-color: var(--secondary-color);
  justify-content: flex-start;
  
}

.task11 h1{
  color: #000;
  font-size: 3vw;
  padding-left: 3vw;
}



.tasks {
  padding: 3vw 5vw;
}

.tasks a {
  color: #000;
  font-size: 3vw;
  font-weight: bold;
}

.tasks a:hover {
  color: var(--secondary-color);
}

/* Portfolio Container */
.portfolio-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px; /* 控制图片之间的垂直间隙 */
  padding: 20px;
}

/* Portfolio Item: Single Row */
.portfolio-item {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  height: auto; /* 动态适配高度 */
  padding-left: 25%; /* 为描述区域预留空间 */
  padding-right: 2%;
}

/* Image Styles */
.portfolio-item img {
  width: 100%; /* 符合宽度要求 */
  height: auto;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加图片阴影 */
}

.portfolio-item img:hover {
  border: 1vw solid var(--secondary-color);
}

.portfolio-description {
  position: absolute;
  right: 78%; /* 最右侧距离页面左边  */
  bottom: 10px; /* 距离图片底部 */
  text-align: right; /* 向左对齐文字 */
  max-width: 80%; /* 确保文字宽度合理，避免溢出 */
  color: #333; /* 文字颜色 */
  font-size: 2rem; /* 文字大小 */
  line-height: 1.6; /* 行高，提高可读性 */
  font-family: Arial, sans-serif; /* 字体 */
  white-space: nowrap;
}

.Essay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68vh;
}

.Essay h1 {
  text-align: center;
  color: var(--secondary-color);
}

.Essay div {
  height: 100%;
  width: calc(50% - 10px);
}

.Essay iframe {
  width: 100%;
  height: 100%;
}

.tasks3 {
  padding: 3vw 5vw;
  height: 80vh;
}

.tasks3 img {
  width: 100%;
}

.tasks3 iframe {
  height: 100%;
  width: 100%;
}

/*images */

.content img {
  width: 100%;
  height: auto;
}

/* General Link Styles */
.splash-nav a {
  color: var(--primary-color); /* Use primary color for text links */
  text-decoration: none; /* Remove underline */
  transition: color 0.3s ease, background-color 0.3s ease; /* Smooth transition */
}

.splash-nav img{
  height: 3vw;
}

/* Button Link Styles */
.button-link {
  display: inline-block; /* Make it block for padding */
  background-color: var(--primary-color); /* Background color */
  color: var(--sec-text-color); /* Text color */
  padding: 10px 15px; /* Padding for button effect */
  border-radius: 5px; /* Rounded corners */
  font-weight: bold; /* Bold text for emphasis */
  text-align: center; /* Center text */
  transition: background-color 0.3s ease; /* Smooth background change */
}

/* Button Link Hover */
.button-link:hover {
  background-color: var(--secondary-color); /* Change background on hover */
}

/* Tasks Page Styles */
main {
  padding: 20px;
}

article {
  background-color: var(--section-bg1);
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

article h2 {
  margin-top: 0;
}

.more-link {
  display: inline-block;
  margin-top: 10px;
  color: var(--primary-color);
  text-decoration: none;
  font-weight: bold;
}

.more-link:hover {
  text-decoration: underline;
}
/* 控制图片大小 */
.image-container img {
  max-width: 100%; /* 图片宽度与父元素（段落宽度）相同 */
  height: auto; /* 确保比例不变 */
  cursor: pointer; /* 鼠标悬停时显示手型图标，表明图片可点击 */
  border-radius: 5px; /* 添加圆角效果 */
  transition: transform 0.3s; /* 悬停时动画 */
}

/* 悬停时微缩放 */
.image-container img:hover {
  transform: scale(1.05); /* 图片放大 5% */
}

/* Modal 样式 */
.modal {
  display: none; /* 初始状态隐藏 */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8); /* 背景为半透明黑色 */
}

.modal-content {
  display: block;
  margin: auto;
  max-width: 80%; /* 最大宽度为屏幕的 80% */
  max-height: 80%; /* 最大高度为屏幕的 80% */
}

.close {
  position: absolute;
  top: 15px;
  right: 25px;
  color: white;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
}

/* Responsive Styles */
@media (max-width: 768px) {
  /* Splash Page Responsive */
  .splash-content h1 {
    font-size: 28px;
  }

  .splash-nav ul {
    flex-direction: column; /* Stack links vertically on smaller screens */
  }

  .splash-nav ul li {
    margin: 10px 0; /* Adjust margin for vertical layout */
  }

  .splash-nav a {
    font-size: 18px; /* Adjust font size for mobile */
  }

  /* General Navigation Responsive */
  nav ul {
    flex-direction: column; /* Stack links vertically on smaller screens */
  }

  nav ul li {
    margin: 10px 0; /* Adjust margin for vertical layout */
  }

  nav a {
    font-size: 16px; /* Adjust font size for mobile */
  }

  /* Tasks Container Responsive */
  .tasks-container .content {
    column-count: 2; /* Two columns for iPad */
  }

  /* Mobile Styles */
  @media (max-width: 480px) {
    .tasks-container .content {
      column-count: 1; /* One column for mobile */
    }
  }
}