/* 定义彩虹动画 */
/* 红色 */
/* 橙色 */
/* 黄色 */
/* 绿色 */
/* 蓝色 */
/* 靛色 */
/* 紫色 */
/* 回到红色 */
/* 有点太高调了 先注释掉 */

/*
@keyframes rainbow { 
    0% { color: red; } 
    14% { color: orange; } 
    28% { color: yellow; } 
    42% { color: green; } 
    57% { color: blue; } 
    71% { color: indigo; } 
    85% { color: violet; } 
    100% { color: red; } 
}
*/
body {
    font-family: Arial, sans-serif; /* 设置字体 */
    background-color: #121212; /* 设置背景颜色为深色 */
    color: #e0e0e0; /* 设置字体颜色为浅色 */
    display: flex; /* 使用flexbox布局 */
    flex-direction: column; /* 使子元素垂直排列 */
    align-items: center; /* 子元素水平居中 */
    margin: 0; /* 去除默认外边距 */
    padding: 0; /* 去除默认内边距 */
    transform: scale(var(--scale, 1)); /* 全局缩放 */
    transform-origin: top left; /* 缩放原点为左上角 */
    background-image: url('/static/images/images_down.png'); /* 增加背景图片 */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
h1 {
    text-align: center; /* 文本居中 */
    margin: 20px 0; /* 设置上下外边距为20px */
    /* animation: rainbow 5s infinite linear; 应用彩虹动画效果 */
}
.main-container {
    width: 93%; /* 设置主容器宽度为90% */
    background-color: rgba(30,30,30,0.70); /* 更透明 */
    padding: 15px; /* 设置内边距为15px */
    border-radius: 10px; /* 设置圆角半径为10px */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 添加阴影效果 */
    display: flex; /* 使用flexbox布局 */
    flex-direction: column; /* 使子元素垂直排列 */
    align-items: center; /* 子元素水平居中 */
}
.software-row {
    width: 100%; /* 设置行宽度为100% */
    display: flex; /* 使用flexbox布局 */
    justify-content: space-between; /* 子元素之间均匀分布 */
    margin-bottom: 20px; /* 设置底部外边距为20px */
    gap: 15px; /* 设置子元素之间的间隔 */
}
.software-box {
    background-color: rgba(51,51,51,0.60); /* 更透明 */
    width: calc(33% - 4px); /* 设置宽度为33%减去2px间隔 */
    padding: 20px; /* 设置内边距为20px */
    border-radius: 12px; /* 设置圆角半径为12px */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 添加阴影效果 */
    display: flex; /* 使用flexbox布局 */
    flex-direction: column; /* 使子元素垂直排列 */
    align-items: center; /* 子元素水平居中 */
}
.software-name {
    flex: 1; /* 使元素占据可用空间 */
    text-align: left; /* 文本左对齐 */
    width: 90%; /* 设置宽度为90% */
    margin-bottom: 10px; /* 设置底部外边距为10px */
    color: #ffffff; /* 设置字体颜色为白色 */
    font-size: 1.0em; /* 使用em单位设置字体大小，随父元素大小变化 */
    
}
.button-container {
    display: flex; /* 使用flexbox布局 */
    justify-content: space-between; /* 子元素之间均匀分布 */
    width: 100%; /* 设置宽度为100% */
    white-space: nowrap; /* 禁止自动换行 */
}
.button {
    background-color: #007BFF; /* 设置按钮背景颜色为蓝色 */
    color: white; /* 设置按钮字体颜色为白色 */
    padding: 10px 20px; /* 设置内边距为10px和15px */
    text-decoration: none; /* 去除文本装饰 */
    border-radius: 5px; /* 设置圆角半径为5px */
    flex: 1; /* 使按钮占据可用空间 */
    text-align: center; /* 文本居中 */
    margin: 0 3px; /* 设置左右外边距为3px */
    transition: transform 0.3s, color 0.3s; /* 设置过渡效果 */
    font-size: 0.9em; /* 使用em单位设置字体大小，随父元素大小变化 */
    box-sizing: border-box; /* 确保内边距和边框包含在总宽度和高度内 */
}
.button:hover {
    transform: scale(1.1); /* 鼠标悬停时放大按钮 */
    color: #00FF00; /* 鼠标悬停时字体变绿 */
}
.no-mobile { /* 移动设备访问提示样式 */
    display: none; /* 初始状态下隐藏 */
    position: fixed; /* 固定位置 */
    top: 0; /* 顶部位置 */
    left: 0; /* 左侧位置 */
    width: 100%; /* 全宽度 */
    height: 100%; /* 全高度 */
    background-color: rgba(0, 0, 0, 0.9); /* 半透明黑色背景 */
    color: #fff; /* 白色字体 */
    display: flex; /* 使用flexbox布局 */
    flex-direction: column; /* 使子元素垂直排列 */
    justify-content: center; /* 子元素垂直居中 */
    align-items: center; /* 子元素水平居中 */
    z-index: 1000; /* 设置较高的层叠顺序 */
}