/* 导入外部CSS文件 */
@import url('swap.css');

/* 全局body样式 */
body {
    background: rgba(28, 28, 30, 1); /* 深灰色背景 */
    font-family: Poppins, sans-serif; /* 使用Poppins字体 */
    margin: 0 5%; /* 默认（移动端）：左右边距5% */
    padding: 0; /* 去掉默认的内边距 */
}

/* PC端（屏幕宽度≥768px） */
@media (min-width: 768px) {
    body {
        margin: 0 30%; /* PC端：左右边距30% */
    }
}
/* 弹性布局类 */
.flex {
    display: flex; /* 启用flex布局 */
}

/* 作者头像样式 */
.author-img {
    background-image: url(icons/poomsmart.png); /* 头像图片 */
    background-size: cover; /* 图片覆盖整个元素 */
    height: 50px; /* 高度 */
    width: 50px; /* 宽度 */
    border-radius: 50%; /* 圆形效果 */
}

/* 作者名字样式 */
.author-name {
    line-height: 50px; /* 行高与头像高度一致 */
    margin-left: 8px; /* 左边距 */
}

/* QQ图标样式 */
.author-QQ {
    background-image: url(icons/QQ.png); /* QQ图标 */
    background-size: cover; 
    height: 50px;
    width: 50px;
    border-radius: 50%;
    margin-left: auto; /* 自动左边距，用于右对齐 */
}

/* Twitter图标样式 */
.author-twitter {
    background-image: url(icons/twitter.png); /* Twitter图标 */
    background-size: cover;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    margin-left: auto;
}

/* 邮箱图标样式 */
.author-email {
    background-image: url(icons/email.png); /* 邮箱图标 */
    background-size: cover;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    margin-left: auto;
}

/* 左浮动类 */
.fl-lf {
    float: left;
}
/* 右浮动类 */
.fl-rg {
    float: right;
}

/* 页脚样式 */
footer {
    margin-top: 20px; /* 上边距 */
    text-align: center; /* 文字居中 */
    color: rgba(255, 255, 255, 0.397); /* 半透明白色 */
    /* 禁止用户选择文本 */
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

/* 水平线样式 */
hr {
    margin: 0; /* 去除默认外边距 */
}

/* GitHub图标样式 */
.author-github {
    background-image: url(icons/github.png); /* GitHub图标 */
    background-size: cover;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    margin-left: auto;
}

/* PNG图标样式 */
.canpngrepo-icon {
    background-image: url(icons/png-transparan.png); /* PNG图标 */
    height: 80px;
    width: 80px;
    background-size: cover;
    border-radius: 22%; /* 圆角矩形 */
    display: flex;
    margin: auto; /* 水平居中 */
}

/* PNG名称样式 */
.canpngrepo-name {
    text-align: center; /* 文字居中 */
    margin-top: 5px; /* 上边距 */
    font-size: 20px; /* 字体大小 */
    font-weight: 500; /* 字体粗细 */
    color: #fff; /* 白色文字 */
}

/* 链接样式 - 去除下划线 */
a {
    text-decoration: none;
}

/* 固件标签样式 */
.firmware {
    background-color: rgb(48, 209, 88); /* 绿色背景 */
    color: #fff; /* 白色文字 */
    text-align: center; /* 文字居中 */
    padding: 6px; /* 内边距 */
    border-radius: 50px; /* 圆角 */
}

/* 蓝色文字类 */
.blue {
    color: rgba(10, 132, 255, 1); /* 亮蓝色 */
}

/* 图标样式 */
.icon {
    font-size: 25px; /* 图标大小 */
    margin-right: 5px; /* 右边距 */
}

/* 区块标题样式 */
.block-title {
    color: #fff; /* 白色文字 */
    margin-top: 15px; /* 上边距 */
    margin-bottom: 6px; /* 下边距 */
    font-size: 25px; /* 字体大小 */
    text-align: center; /* 文字居中 */
    font-weight: 600; /* 字体粗细 */
    /* 禁止用户选择文本 */
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

/* 上边距类 */
.mg {
    margin-top: 15px;
}

/* 容器样式 */
.container {
    background-color: rgba(0, 0, 0, 0.842); /* 半透明黑色背景 */
    color: #fff; /* 白色文字 */
    padding: 15px; /* 内边距 */
    margin-top: 10px; /* 上边距 */
    border-radius: 15px; /* 圆角 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.521); /* 阴影效果 */
}

/* 轮播容器样式 */
.carousel {
    margin-left: -.75rem; /* 负左边距 */
    margin-right: -.75rem; /* 负右边距 */
}
.carousel {
    display: flex; /* 弹性布局 */
    justify-content: start; /* 左对齐 */
    overflow-x: auto; /* 水平滚动 */
    overflow-y: hidden; /* 垂直方向隐藏溢出 */
    -webkit-overflow-scrolling: touch; /* iOS滚动平滑 */
    scroll-snap-type: x mandatory; /* 滚动吸附效果 */
    scroll-padding: 50%; /* 滚动内边距 */
    list-style: none; /* 去除列表样式 */
    line-height: 0; /* 行高为0 */
    padding: 0; /* 去除内边距 */
    height: auto; /* 自动高度 */
}

/* 雪花基础样式 */
.snowflake {
  color: #fff; /* 白色 */
  font-size: 1em; /* 字体大小 */
  font-family: Arial; /* 字体 */
  text-shadow: 0 0 1px #000; /* 文字阴影 */
}

/* 雪花动画关键帧 */
@-webkit-keyframes snowflakes-fall{
    0%{top:-10%} 
    100%{top:100%}
}
@-webkit-keyframes snowflakes-shake{
    0%{-webkit-transform:translateX(0px);transform:translateX(0px)}
    50%{-webkit-transform:translateX(80px);transform:translateX(80px)}
    100%{-webkit-transform:translateX(0px);transform:translateX(0px)}
}
@keyframes snowflakes-fall{
    0%{top:-10%}
    100%{top:100%}
}
@keyframes snowflakes-shake{
    0%{transform:translateX(0px)}
    50%{transform:translateX(80px)}
    100%{transform:translateX(0px)}
}

/* 雪花元素样式 */
.snowflake{
    position:fixed; /* 固定定位 */
    top:-10%; /* 初始位置在顶部上方 */
    z-index:9999; /* 高z-index确保在最上层 */
    /* 禁止用户选择 */
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    cursor:default; /* 默认光标 */
    /* 应用动画 */
    -webkit-animation-name:snowflakes-fall,snowflakes-shake;
    -webkit-animation-duration:10s,3s;
    -webkit-animation-timing-function:linear,ease-in-out;
    -webkit-animation-iteration-count:infinite,infinite;
    -webkit-animation-play-state:running,running;
    animation-name:snowflakes-fall,snowflakes-shake;
    animation-duration:10s,3s;
    animation-timing-function:linear,ease-in-out;
    animation-iteration-count:infinite,infinite;
    animation-play-state:running,running
}

/* 为不同位置的雪花设置不同的动画延迟 */
.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}
.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}
.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}
.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}
.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}
.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}
.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}
.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}
.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}
.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}

/* 演示文本样式 */
.demo {
  font-family: 'Raleway', sans-serif; /* 字体 */
  color:#fff; /* 白色文字 */
  display: block; /* 块级元素 */
  margin: 0 auto; /* 水平居中 */
  padding: 15px 0; /* 上下内边距 */
  text-align: center; /* 文字居中 */
}
.demo a {
  font-family: 'Raleway', sans-serif; /* 字体 */
  color: #000; /* 黑色文字 */		
}

/* 动画按钮样式 */
.animbutton {
    background-color: rgba(10, 132, 255, 1); /* 蓝色背景 */
    width: auto; /* 自动宽度 */
    text-align: center; /* 文字居中 */
    padding: 15px; /* 内边距 */
    margin: auto; /* 水平居中 */
    box-shadow: 0 0 15px rgba(10, 132, 255, 0.322); /* 蓝色阴影 */
    margin: 10px; /* 外边距 */
    color: #fff; /* 白色文字 */
    border-radius: 15px; /* 圆角 */
    /* 呼吸动画 */
    animation: shadowBreathe 5s infinite ease-in-out;
}

/* 呼吸动画关键帧 */
@keyframes shadowBreathe {
  0% {
    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.144); /* 初始阴影 */
  }
  50% {
    box-shadow: 0px 6px 20px rgba(0, 132, 255, 0.493); /* 中间状态阴影 */
  }
  100% {
    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.144); /* 结束阴影 */
  }
}

/* 响应式设计 - 大屏幕设备 */
@media screen and ( min-width: 768px ) {
    /* 轮播单元格样式 */
    .gallery-cell { 
        width: 100%; /* 宽度100% */
        margin-right: 5px; /* 右边距 */
     }
}
  
/* 响应式设计 - 小屏幕设备 */
@media screen and ( min-width: 350px ) {
    /* 轮播单元格样式 */
    .gallery-cell { 
        width: 250px; /* 固定宽度 */
        margin-right: 5px; /* 右边距 */
    }
}