/*实现页面随分辨率自适应*/
body {
    margin: 0;
    padding: 0;
}

/* 搜索引擎选项 */
#search-form {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    font-size: 1.35pc;
}

#search-form input {
    width: 45pc;
}

.italic {
    font-style: normal;
    /* 移除斜体 */
    font-size: 0.7pc;
}

/* 默认状态 */
.fangda {
    transition: transform 0.2s ease;
    /* 平滑过渡 */
}

/* 鼠标悬停时放大 */
.fangda:hover {
    transform: scale(1.2);
    transition: transform 0.2s ease;
    transform-origin: bottom;
    /* 可以尝试 top、left、right、bottom 或 center */
    cursor: pointer;
    /* 鼠标悬停时显示为手型指针 */
}

/* 被选中时放大 */
input:checked+.fangda {
    transform: scale(1.2);
    transition: transform 0.2s ease;
    transform-origin: bottom;
    /* 可以尝试 top、left、right、bottom 或 center */
}

.icon-color {
    transition: transform 0.2s ease, filter 0.2s ease;
    /* 平滑过渡 */
    filter: grayscale(100%) sepia(100%) hue-rotate(180deg);
    /* 给图片添加颜色效果 */
}

/* 选中时取消颜色（恢复原始颜色） */
input:checked+label .icon-color {
    filter: none;
    /* 取消颜色效果 */
}

#search-form input[type="text"] {
    font-size: 1.35pc;
    border: no1e;
    user-select: none;
    border: none;
    background-color: transparent;
    /* 取消输入框的边框 */
    outline: none;
    /* 取消输入框获得焦点时的外边框 */
    position: relative;
    padding: 5px 0px 5px 20px;
    border-radius: 8px 0 0 8px;
    /* 左上角和左下角为圆角，右上角和右下角为直角 */
}

/*搜索输入框和提交按钮大小*/
.input-group {
    background-color: rgb(225, 225, 225);
    /* 内部背景变为白色 */
    width: 700px;
    /* 设置一个固定的宽度 */
    border-radius: 8px;
    /* 设置按钮的圆角（可选） */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    display: flex;
}

#search-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* 整组内容居中 */
}

.radio-group {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    user-select: none;
}

.radio-group label {
    display: inline-block;
    /* 让 label 成为可点击区域 */
    padding: 0 23px 0 23px;
    /* 增加内边距，扩大选择面积 */
}

.search-bar {
    display: flex;
    align-items: center;
}

.search-bar input[type="text"] {
    margin-right: 10px;
}

/*点击选项取消圆圈显示*/
.radio-group input[type="radio"] {
    display: none;
}

button {
    border: none;
    /* 移除默认边框 */
    outline: none;
    /* 移除聚焦时的外边框 */
    background-color: transparent;
    /* 设置文字颜色 */
    padding: 5px 12px;
    /* 设置按钮内边距 */
    border-radius: 0 8px 8px 0;
    /* 设置按钮的圆角（可选） */
    cursor: pointer;
    /* 鼠标悬停时显示为手型指针 */
}

.custom-icon {
    color: #777777;
    transform: scale(0.6)
        /* 设置图标大小 */
}

/* 鼠标悬停或点击时的样式 */
.input-group:hover,
.input-group:focus-within {
    background-color: #ffffff;
    /* 内部背景变为白色 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    /* 四面均匀的阴影 */
    border-radius: 8px;
}

/*搜索引擎选项按钮样式*/
.hvr-bubble-bottom {
    display: flex;
    /* 设置 label 为 flex 布局 */
    flex-direction: column;
    /* 使内容垂直排列 */
    align-items: center;
    /* 确保图标和文字在水平方向居中 */
    justify-content: center;
    /* 可选，垂直方向也居中对齐 */
}

/*链接列表样式*/
#links {
    display: flex;
    flex-wrap: wrap;
    max-width: 1680px;
    margin: 15px auto;
    justify-content: flex-start;
    user-select: none;
}

#links>* {
    width: 250px;
    margin: 12px 15px;
}

/*链接按钮*/
.links-box {
    display: flex;
    align-items: center;
    text-decoration: none;
}

/*链接按钮字体*/
.links-box i {
    width: 190px;
    /* 设置元素的宽度 */
    padding: 25px 0px 25px 20px;
    color: black;
    font-size: 1.35pc;
    text-align: left;
    font-style: normal;
    white-space: nowrap;
    overflow: hidden;
}

.icon {
    width: 40px;
    /* 初始宽度 */
    height: 40px;
    /* 初始高度 */
    fill: currentColor;
    overflow: hidden;
}

/* Float Shadow */
/*浮影效果*/
.hvr-float-shadow {
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.hvr-float-shadow:before {
    pointer-events: none;
    position: absolute;
    z-index: -1;
    content: '';
    top: 100%;
    left: 0%;
    height: 5px;
    width: 100%;
    opacity: 0;
    background: -webkit-radial-gradient(50% -50%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
    background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
    /* W3C */
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform, opacity;
    transition-property: transform, opacity;
}

.hvr-float-shadow:hover {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    /*将元素向上移动 5px*/
}

.hvr-float-shadow:hover:before {
    opacity: 1;
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
    /*将元素向下移动 5px（它将留在原地，因为它附加到也向上移动 5px 的元素）*/
}