/* styles.css */  
  
/* 通用样式 */  
body {  
    font-family: Arial, sans-serif;  
    margin: 0;  
    padding: 0;  
    line-height: 1.6;  
    color: #333;  
    background-color: #f4f4f4;  
}  
  
/* 设置页面最大宽度为1000px，并居中显示 */  
.container {  
    max-width: 1000px;  
    margin: 0 auto;  
    padding: 20px;  
}  
  
/* 头部样式 */  
header {  
    background-color: #333;  
    color: #fff;  
    text-align: center;  
    padding: 15px 0;  
}  
  
/* 游戏截图样式 */  
#game-images {  
    display: flex;  
    overflow-x: auto;  
    scroll-snap-type: x mandatory;  
    scroll-padding: 50px;  
    margin-bottom: 30px;  
}  

.download-container {  
    text-align: center; /* 水平居中 */  
    padding: 20px; /* 添加一些内边距以避免按钮贴边 */  
}  
  
.download-button {  
    display: inline-block; /* 确保按钮是行内块级元素 */  
    padding: 10px 20px;  
    background-color: #007bff;  
    color: #fff;  
    border-radius: 5px;  
    text-decoration: none;  
    transition: background-color 0.3s ease;  
}
  
#game-images img {  
    flex: 0 0 auto;  
    width: 200px; /* 根据需要调整图片宽度 */  
    height: auto;  
    margin-right: 20px;  
    border-radius: 10px;  
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  
    scroll-snap-align: start;  
}  
  
/* 底部样式 */  
footer {  
    background-color: #333;  
    color: #fff;  
    text-align: center;  
    padding: 15px 0;  
}  
  
footer a {  
    color: #fff;  
    text-decoration: none;  
}  
  
footer a:hover {  
    color: #ccc;  
}  
  
/* 媒体查询，用于适配手机竖屏显示 */  
@media screen and (max-width: 768px) { /* 适配常见的手机竖屏宽度 */  
    .container {  
        padding: 10px; /* 减少内边距以适应小屏幕 */  
    }  
  
    #game-images img {  
        width: 100%; /* 图片宽度设置为100%，以便在小屏幕上完全显示 */  
        margin-right: 10px; /* 减少图片之间的间距 */  
    }  
  
    /* 根据需要调整其他元素的样式以适配小屏幕 */  
}