body {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column; /* 让内容垂直居中 */
            height: 100vh;
            margin:0;
			padding-top: 0; /* 确保没有额外的顶部空间 */
            /*background-image: url('../icon/bj.jpg');*/
			background: linear-gradient(to bottom, #e0f7fa, #006064); /* 浅蓝到深蓝的渐变 */
            color: #333; /* 文字颜色与背景对比明显 */
            background-size: cover;
        }
#site-name {
    font-size: 42px;
    font-weight: bold;
    color: #14797b; /* 浅灰色文本 */
    text-align: center;
	margin-top: -70px;/* 与顶端距离 */
    margin-bottom: 40px; /* 与下方搜索框保持距离 */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); /* 添加文字阴影 */
}

.search-container {
    text-align: center;
    padding: 20px;
    border-radius: 10px;
    margin-top: -50px; /* 将输入框上移，靠近 BioMed */
    margin-bottom: 20px;
    position: relative;
}


        .search-container p {
            font-size: 16px;
            margin-bottom: 10px;
        }
        .logo {
            width: 20px; /* Adjust the width as needed */
            height: 20px; /* Adjust the height as needed */
            margin-right: 5px; /* Adjust the margin as needed */
        }
        .bottom-text {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            font-size: 14px;
            color: white;
			display: flex;
            align-items: center;
        }

        body p {
            font-size: 14px;
            color: #B5B5B5;
        }

        .search-container img {
            width: 50px;
            height: 50px;
			margin: 10px;
            margin-bottom: 100px;
            top: -30px;
        }


        input {
            width: 100%;
			height: 50px;
            padding: 10px;
            box-sizing: border-box;
			margin: 0 auto; /* 设置左右边距为自动，实现水平居中 */
            margin-bottom: 20px;
			border-radius: 20px; /* 添加圆角 */
			
        }

        .icon-button {
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
        }
        
        .icon-container {
		    width: 75%; /* 50% of the viewport width */
            display: flex;
			flex-wrap: wrap;
			margin-top: -75px; /* 整体上移 */
            justify-content: center;
            align-items: center;
        }

        

        .icon {
            width: 40px;
            height: 40px;
			margin: 5px;
			flex: 0 0 calc(20% - 20px);
			
        }

        .small-icon {
            width: 30px;
            height: 30px;
        }
		
		
.custom-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px; /* 增加元素间的间距 */
    margin-top: 20px;
    padding: 15px;
    border-radius: 12px;

}

.link-wrapper {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 10px; /* 圆润的边角 */
    background: linear-gradient(145deg, #ffffff, #e0e0e0);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: grab; /* 显示抓手图标 */
}

.link-wrapper:active {
    cursor: grabbing; /* 拖动时的抓手图标 */
}


.link-wrapper:hover {
    transform: translateY(-3px); /* 悬停时轻微上移 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* 增强悬停时的阴影 */
}

.custom-link {
    margin-right: 8px;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    font-size: 16px; /* 更加显眼的字体 */
}

.custom-link:hover {
    text-decoration: underline;
}

.delete-button {
    background-color: transparent;
    color: #ff4d4d;
    border: none;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.delete-button:hover {
    color: #e60000; /* 悬停时变成更深的红色 */
}

#add-link-button {
    /*background: linear-gradient(130deg,#e0f7fa, #006064);  更加柔和的绿色 */
	background: #14797b; /* 更加柔和的绿色 */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.2s ease;
}


#add-link-button:hover {
    background-color: #45a049; /* 悬停时的背景色 */
    transform: translateY(-2px); /* 悬停时的轻微上移效果 */
}

#add-link-button:active {
    background-color: #3e8e41; /* 按下时的背景色 */
    transform: translateY(1px); /* 按下时的微小下移效果，模拟按钮按压 */
}


	/* Media Query for screens smaller than 600px (typical mobile phones) */
        @media only screen and (max-width: 600px) {
            .search-container img {
                margin-bottom: 100px;
            }

            input {
                width: 100%;
            }

            .icon {
                width: 30px;
                height: 30px;
            }
        }