/* styles.css */

/* 设置页面的基本样式 */
body {
    margin: 0;
    font-family: 'Microsoft YaHei', Arial, sans-serif;
    background: linear-gradient(135deg, #ffffff, #f2aeff, #8190f0, #3a4eff); /* 背景渐变色 */
    color: #000000; /* 页面文字颜色 */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

/* 容器样式 */
.container {
    text-align: center;
}

/* 导航栏样式 */
.nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}

/* 导航按钮样式 */
.nav-button {
    border: 2px solid #ffffff; /* 按钮边框颜色为白色 */
    border-radius: 30px; /* 按钮圆角 */
    color: #ffffff; /* 按钮文字颜色 */
    padding: 15px 30px;
    cursor: pointer;
    transition: all 0.3s ease; /* 添加过渡效果 */
    font-size: 1.2em;
    background-color: transparent; /* 按钮背景色透明 */
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); /* 按钮阴影 */
    position: relative;
    overflow: hidden;
}

/* 每个按钮的颜色设置 */
.nav-button:nth-child(1) {
    /* 红色 */
}

.nav-button:nth-child(2) {
    /* 粉色 */
}

.nav-button:nth-child(3) {
    /* 紫色 */
}

.nav-button:nth-child(4) {
    /* 浅蓝色 */
}

/* 按钮的前景效果 */
.nav-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    background: rgba(255, 255, 255, 0.2); /* 背景色为白色半透明 */
    transition: all 0.5s ease;
    transform: translate(-50%, -50%) scale(0);
    border-radius: 50%;
}

/* 鼠标悬停效果 */
.nav-button:hover::before {
    transform: translate(-50%, -50%) scale(1);
}

/* 鼠标悬停时的按钮文字颜色 */
.nav-button:hover {
    color: #00 0; /* 悬停时文字颜色为黑色 */
}

/* 个人头像样式 */
.profile-img {
    width: 150px;
    height: 150px;
    border-radius: 50%; /* 头像圆形 */
    margin-bottom: 20px;
    border: 5px solid rgba(255, 255, 255, 0.3); /* 头像边框颜色 */
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3); /* 头像阴影 */
}

/* 姓名样式 */
.name {
    font-size: 2.5em;
    margin-bottom: 10px;
    color: #ffffff; /* 姓名文字颜色 */
}

/* 引用样式 */
.quote {
    font-style: italic;
    margin-bottom: 20px;
    font-size: 1.2em;
    color: #f3f9ff; /* 引用文字颜色 */
}

/* 欢迎信息样式 */
.welcome {
    color: #ffffff; /* 欢迎来到我的主页文字颜色 */
    font-size: 1.2em;
}

/* 发光动画效果 */
@keyframes glow {
    0% {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.5), 0 0 30px rgba(255, 255, 255, 0.5), 0 0 40px rgba(255, 255, 255, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.7), 0 0 30px rgba(255, 255, 255, 0.7), 0 0 40px rgba(255, 255, 255, 0.7), 0 0 60px rgba(255, 255, 255, 0.7);
    }
    100% {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.5), 0 0 30px rgba(255, 255, 255, 0.5), 0 0 40px rgba(255, 255, 255, 0.5);
    }
}

/* 按钮发光动画 */
.nav-button {
    animation: glow 1.5s infinite alternate;
}
/* styles.css */

/* 模态框背景 */
.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.5); /* 半透明背景 */
}

/* 模态框内容 */
.modal-content {
    background-color: #fff; /* 背景颜色 */
    margin: 15% auto; /* 垂直居中，水平居中 */
    padding: 20px; /* 内边距 */
    border: 1px solid #888; /* 边框颜色 */
    width: 300px; /* 调整宽度 */
    border-radius: 8px; /* 圆角 */
    position: relative; /* 让 close 按钮绝对定位 */
}

/* 关闭按钮 */
.close {
    color: #7282f3; /* 关闭按钮颜色 */
    float: right; /* 右对齐 */
    font-size: 28px; /* 字号 */
    font-weight: bold; /* 粗体 */
}

/* 关闭按钮悬停颜色 */
.close:hover,
.close:focus {
    color: black; /* 鼠标悬停时颜色 */
    text-decoration: none; /* 去掉下划线 */
    cursor: pointer; /* 鼠标光标变成手形 */
}

/* 复制按钮样式 */
.copy-button {
    background-color: #7282f3; /* 背景颜色 */
    border: none; /* 去掉边框 */
    color: #ffffff; /* 文字颜色 */
    padding: 10px 20px; /* 内边距 */
    text-align: center; /* 文字居中 */
    text-decoration: none; /* 去掉下划线 */
    display: inline-block; /* 让按钮内联显示 */
    font-size: 16px; /* 字号 */
    margin: 10px 0; /* 上下边距 */
    cursor: pointer; /* 鼠标光标变成手形 */
    border-radius: 5px; /* 圆角 */
}

/* 复制按钮悬停效果 */
.copy-button:hover {
    background-color: #0056b3; /* 鼠标悬停时背景颜色 */
}
.bei {
font-size: 12px;  
  color: #666;  
  text-align: center;  
  padding: 10px 0;  
  position: fixed;  
  bottom: 0;  
  width: 100%;  
  background-color: transparent;  
  line-height: 14px; /* 尝试调整这个值来使图标和文字对齐 */  
}
.bei img {  
  vertical-align: text-bottom; /* 使图标和文字垂直居中 */  
   margin-right: 5px; /* 图标和文字之间的间距 */  
   width: 15px; /* 设置图标宽度为近似1.2倍字体大小 */  
   height: auto; /* 保持图标的原始宽高比 */ 
}