@keyframes breathingAnimation {
     0%, 100% {
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0), 0 8px 16px rgba(0, 0, 0, 0.3);
        opacity: 1;
    }
}

kbd-blue {
    border: 2px solid #3498db; /* 蓝色的边框颜色 */
    border-radius: 4px;
    color: #fff; /* 文字颜色设为白色，以在蓝色背景上更清晰可见 */
    display: inline-block;
    font-family: 'Courier New', monospace;
    line-height: 1.4;
    margin: 0 .1em;
    padding: .4em .6em;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); /* 添加文字阴影以提升可读性 */
    font-size: 14px;
    background: linear-gradient(to bottom, #3498db, #3498db); /* 使用线性渐变，保持单一颜色 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.4);
    animation: breathingAnimation 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
kbd-black {
    border: 2px solid #333; /* 机械键盘样式的深色边框 */
    border-radius: 4px; /* 稍微减小边框半径 */
    color: #fff; /* 白色文字颜色 */
    display: inline-block;
    font-family: 'Courier New', monospace; /* 机械感觉的等宽字体 */
    line-height: 1.4;
    margin: 0 .1em;
    padding: .4em .6em;
    text-shadow: none; /* 去掉文字阴影，使外观更整洁 */
    font-size: 14px;
    background: linear-gradient(to bottom, #333, #111); /* 更深的渐变背景 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.4); /* 调整阴影效果 */
    animation: breathingAnimation 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

kbd-gray {
    border: 2px solid #ccc;
    border-radius: 4px;
    color: #333;
    display: inline-block;
    font-family: 'Courier New', monospace;
    line-height: 1.4;
    margin: 0 .1em;
    padding: .4em .6em;
    text-shadow: none;
    font-size: 14px;
    background: linear-gradient(to bottom, #f8f8f8, #e8e8e8, #ccc); /* 添加灰色效果 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.4);
    animation: breathingAnimation 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

kbd-white {
    border: 2px solid #ccc;
    border-radius: 4px;
    color: #333;
    display: inline-block;
    font-family: 'Courier New', monospace;
    line-height: 1.4;
    margin: 0 .1em;
    padding: .4em .6em;
    text-shadow: none;
    font-size: 14px;
    background: linear-gradient(to bottom, #f8f8f8, #e8e8e8);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.4);
    animation: breathingAnimation 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

kbd-pink {
    border: 2px solid #f2a1a8; /* 粉色的边框颜色 */
    border-radius: 4px;
    color: #fff; /* 文字颜色设为白色，以在粉色背景上更清晰可见 */
    display: inline-block;
    font-family: 'Courier New', monospace;
    line-height: 1.4;
    margin: 0 .1em;
    padding: .4em .6em;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); /* 添加文字阴影以提升可读性 */
    font-size: 14px;
    background: linear-gradient(to bottom, #f2a1a8, #f2a1a8); /* 使用线性渐变，保持单一颜色 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.4);
    animation: breathingAnimation 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;

}
kbd-transparency {
    border: 2px solid transparent; /* 将边框颜色设置为透明 */
    border-radius: 4px;
    color: #333; /* 文字颜色设为深色，以在透明背景上更清晰可见 */
    display: inline-block;
    font-family: 'Courier New', monospace;
    line-height: 1.4;
    margin: 0 .1em;
    padding: .4em .6em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); /* 添加文字阴影以提升可读性 */
    font-size: 14px;
    background: linear-gradient(to bottom, transparent, transparent); /* 使用透明渐变，保持透明 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.4);
    animation: breathingAnimation 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
/* 移动设备的媒体查询 */
@media only screen and (max-width: 600px) {
    kbd-black {
        font-size: 12px;
        padding: .3em .5em;
        border: 1px solid #333; /* 机械键盘样式的深色边框 */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.4); /* 调整阴影效果 */
        border-radius: 4px; /* 稍微减小边框半径 */
    }

    kbd-gray {
        font-size: 12px;
        padding: .3em .5em;
        border: 1px solid #ccc;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.4);
        border-radius: 4px;
    }

    kbd-white {
        font-size: 12px;
        padding: .3em .5em;
        border: 1px solid #ccc;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.4);
        border-radius: 4px;
    }

    kbd-pink {
        font-size: 12px;
        padding: .3em .5em;
        border: 1px solid #f2a1a8; /* 粉色的边框颜色 */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.4);
        border-radius: 4px;
    }

    kbd-transparency {
        font-size: 12px;
        padding: .3em .5em;
        border: 1px solid transparent; /* 将边框颜色设置为透明 */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.4);
        border-radius: 4px;
    }
    kbd-blue {
        font-size: 12px;
        padding: .3em .5em;
        border: 1px solid #3498db; /* 蓝色的边框颜色 */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.4);
        border-radius: 4px;
    }
}