/* Reset some default browser styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');

:root {
    font-size: 15px;
}

.background-animation {
    /* Reset some default browser styles */
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    font-family: 'Quicksand', sans-serif;
    min-height: 100vh;
    background-color: #e493d0;

    background-image: 
        radial-gradient(closest-side, rgba(235, 105, 78, 1), rgba(235, 105, 78, 0)),
        radial-gradient(closest-side, rgba(243, 11, 164, 1), rgba(243, 11, 164, 0)),
        radial-gradient(closest-side, rgba(254, 234, 131, 1), rgba(254, 234, 131, 0)),
        radial-gradient(closest-side, rgba(170, 142, 245, 1), rgba(170, 142, 245, 0)),
        radial-gradient(closest-side, rgba(248, 192, 147, 1), rgba(248, 192, 147, 0));
    
    background-size: 
        130vmax 130vmax,
        80vmax 80vmax,
        90vmax 90vmax,
        110vmax 110vmax,
        90vmax 90vmax;
    
    background-position:
        -80vmax -80vmax,
        60vmax -30vmax,
        10vmax 10vmax,
        -30vmax -10vmax,
        50vmax 50vmax;
    
    background-repeat: no-repeat;
    
    animation: 10s movement linear infinite;
}

@keyframes movement {
    0%, 100% {
        background-size: 
        130vmax 130vmax,
        80vmax 80vmax,
        90vmax 90vmax,
        110vmax 110vmax,
        90vmax 90vmax;
        background-position:
        -80vmax -80vmax,
        60vmax -30vmax,
        10vmax 10vmax,
        -30vmax -10vmax,
        50vmax 50vmax;
    }
    25% {
        background-size: 
        100vmax 100vmax,
        90vmax 90vmax,
        100vmax 100vmax,
        90vmax 90vmax,
        60vmax 60vmax;
        background-position:
        -60vmax -90vmax,
        50vmax -40vmax,
        0vmax -20vmax,
        -40vmax -20vmax,
        40vmax 60vmax;
    }
    50% {
        background-size: 
        80vmax 80vmax,
        110vmax 110vmax,
        80vmax 80vmax,
        60vmax 60vmax,
        80vmax 80vmax;
        background-position:
        -50vmax -70vmax,
        40vmax -30vmax,
        10vmax 0vmax,
        20vmax 10vmax,
        30vmax 70vmax;
    }
    75% {
        background-size: 
        90vmax 90vmax,
        90vmax 90vmax,
        100vmax 100vmax,
        90vmax 90vmax,
        70vmax 70vmax;
        background-position:
        -50vmax -40vmax,
        50vmax -30vmax,
        20vmax 0vmax,
        -10vmax 10vmax,
        40vmax 60vmax;
    }
}

/* Header styles */
header {
    position:fixed;
    top: 0;
    left: 0;
    width: 100%;
    color: white;
    padding: 20px;
    text-align: center;
    z-index: 9999;
    backdrop-filter: blur(3px); /* 设置模糊程度 */
    background-color: rgba(255, 255, 255, 0.5); /* 设置半透明背景色以增强效果 */
}

/* Content container styles */
.content-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 20px;
    margin-top: 20px;
    margin-bottom: 100px;
    z-index: 1;
}

/* Content block styles */
.content-block {
    display: flex; /* 将 a 标签改为块级元素并使用 Flex 布局 */
    flex-direction: column; /* 设置 Flex 布局的方向为垂直方向 */
    width: 300px; /* Subtracting the padding for proper spacing */
    height:auto; /* 让方块的高度随内容长度自动改变 */
    min-height: 300px;
    padding: 20px;
    margin-bottom: 20px;
    backdrop-filter: blur(3px); /* 设置模糊程度 */
    background-color: rgba(255, 255, 255, 0.5); /* 设置半透明背景色以增强效果 */
    border-radius: 10px; /* 添加圆角效果 */
    z-index: 2;
    transition: all 0.3s ease; /* 添加过渡效果到非hover状态的选择器 */
    color:rgb(77, 75, 75);
    text-decoration: none;
}

/* 添加内容方块悬停效果 */
.content-block:hover {
    transform: translateY(-10px);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    backdrop-filter: blur(5px); /* 保持毛玻璃效果 */
    background-color: rgba(255, 255, 255, 0.7); /* 保持半透明背景色 */
    border-radius: 10px; /* 保持圆角效果 */
}

/* Content container styles */
.content-container-wide {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 20px;
    margin-top: 100px;
    margin-bottom: 100px;
    margin-left: 8%;
    margin-right: 8%;
    z-index: 1;
    display: flex;
}

/* Content block styles */
.content-block-wide {
    display: flex; /* 将 a 标签改为块级元素并使用 Flex 布局 */
    flex-direction: column; /* 设置 Flex 布局的方向为垂直方向 */
    width: calc(95% - 40px); /* Subtracting the padding for proper spacing */
    height:auto; /* 让方块的高度随内容长度自动改变 */
    padding: 20px;
    margin-bottom: 20px;
    backdrop-filter: blur(3px); /* 设置模糊程度 */
    background-color: rgba(255, 255, 255, 0.5); /* 设置半透明背景色以增强效果 */
    border-radius: 10px; /* 添加圆角效果 */
    z-index: 2;
    transition: all 0.3s ease; /* 添加过渡效果到非hover状态的选择器 */
    color: rgb(77, 75, 75);
    text-decoration: none;
    display: flex;
}

.content-block-wide:hover {
    transform: translateY(-10px);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    backdrop-filter: blur(5px); /* 保持毛玻璃效果 */
    background-color: rgba(255, 255, 255, 0.7); /* 保持半透明背景色 */
    border-radius: 10px; /* 保持圆角效果 */
}

/* Footer styles */
footer {
    background-color: #00949b;
    position: fixed; /* 修改为 fixed */
    color: rgb(77, 75, 75);
    padding: 20px;
    backdrop-filter: blur(3px); /* 设置模糊程度 */
    background-color: rgba(255, 255, 255, 0.5); /* 设置半透明背景色以增强效果 */
    text-align: center;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 4;
}

/* 标题的样式 */
 
  .title {
    font-size: 7vw; /* 调整字体大小 */
    letter-spacing: 5px; /* 增大字体间距 */
    color: rgba(255, 255, 255, 0.307); /* 使用透明的颜色 */
    text-decoration: none; /* 去除链接的下划线 */
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); /* 添加阴影效果 */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }

  .search-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    margin: 100px 40px 10px 40px;
    padding-bottom: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 保留阴影效果 */
    border-radius: 20px; /* 保持圆角效果 */
    background-color: rgba(255, 255, 255, 0.5); /* 设置半透明背景色以增强效果 */
}


.search-input-container {
    position: relative;
    width: 95%;
    margin: 20px auto 10px; /* 上下边距20px，左右自动边距实现居中 */
    border-radius: 20px; /* 保持圆角效果 */
    background-color: rgba(255, 255, 255, 0.5); /* 设置半透明背景色以增强效果 */
}

.search-input-bar{
    position: relative;
    width: 95%;
    height: 10px;
    margin: 0px auto 20px; /* 上下边距20px，左右自动边距实现居中 */
    border-radius: 10px; /* 保持圆角效果 */
    background-color: #367BA6 /* 设置半透明背景色以增强效果 */
}

#searchInput {
    padding: 15px 20px;
    border-radius: 25px;
    margin: 20px 40px 20px 15px; /* 上下边距20px，左右自动边距实现居中 */
    width: 85%;
    border: none;
    outline: none;
    box-sizing: border-box;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 按钮阴影效果 */
}

#searchBtn {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    padding: 12px 25px;
    border-radius: 25px;
    background-color: #367BA6;
    color: white;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 按钮阴影效果 */
}

#searchEngines {
    display: flex;
    flex-wrap: wrap; /* 允许flex项换行 */
    gap: 10px; /* 按钮之间的间距，可根据需要调整 */
    margin: auto 10px;
    justify-content: space-around;
    min-width: 100px;
    margin-top: 10px;
}

.engine-btn {
    margin: 5px 0;
    padding: 12px 20px;
    border-radius: 25px;
    border: none;
    cursor: pointer;
    width: 125px;
    color: white;
    background-color: rgba(255, 255, 255, 0.1);
    transition: background-color 0.3s;
}

.engine-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* 更新搜索引擎颜色定义，考虑透明度调整 */
.bing {
    background-color: #367BA6;
}

.ai360 {
    background-color: #0058FF;
}

.baidu {
    background-color: #2B32D8;
}

.bilibili {
    background-color: #4EABE6;
}

.douyin {
    background-color: #23343D;
}

.csdn {
    background-color: #E96140;
}

.github {
    background-color: #020409;
}

.weibo {
    background-color: #EF8933;
}