/*
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2024-07-29 16:10:52
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2024-07-31 21:27:58
 * @FilePath: \BlockPlus\css\index.css
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    height: 100%;
    width: 100%;
    background-color: rgb(230, 230, 255);
}

h2 {
    margin-top: 0px;
}

.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    height: 60px;
    background-color: #5e17eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    z-index: 100;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    border-radius: 0 0 10px 10px;
}

.block {
    width: 96%;
    border-radius: 10px;
    background-color: #ffffff;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.block h2 {
    display: inline-block;
}

.tip {
    
    font-size: small; 
    color: #888; 
    margin-left: 10px;
    display: inline-block;
}

.imgs {
    margin: 15px;
    margin-top: 20px;
    margin-bottom: 5px;
    width: 240px;
    height: 120px;
    border-radius: 20px;
    overflow: hidden; /* 隐藏超出容器的部分 */
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

.imgs img {
    width: 100%; /* 宽度设为100%，以适应容器宽度 */
    height: 100%; /* 高度设为100%，以适应容器高度 */
    object-fit: cover; /* 保持图片长宽比，放大图片以覆盖整个容器 */
    border-radius: 20px; /* 与容器相同的边框圆角 */
}

.blocks h3 {
    margin: 0px;
    margin-bottom: 15px;
    text-align: center;
}

.blocks p {
    margin: 8px;
    text-align: center;
    font-size: smaller;
    color: #ccc;
}

.blocks {
    position: relative;
    margin: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    background-color: rgb(255, 255, 255);
    width: 270px;
    height: 250px;
    border-radius: 20px;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    overflow: hidden;
}

.blocks:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    transform: translateY(-5px);
}

.blocks .shadow {
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    border-radius: 20px;
    position: absolute;
    display: flex;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.3s ease;
    z-index: 2;
}

.blocks:hover .shadow {
    visibility: visible;
    opacity: 1;
}

.buttons {
    width: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.buttons button {
    width: 160px;
    height: 50px;
    background-color: #8b56f5;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin: 5px 5px;
}

.buttons button:hover {
    background-color: #5e17eb;
}

.searchResult {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.title {
    color: white;
    font-size: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.qqgroup {
    font-size: 16px;
    margin-right: 5%;
}

a:link, a:visited , a:active , a:hover {
    color: white;
}

a{
    text-decoration: none;
}

.qqgroup:hover {
    text-decoration: underline;
}

.content {
    margin-top: 60px;
    padding: 20px;
}

.search-container {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

#searchInput {
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 8px;
}

#searchButton {
    border: none;
    background-color: transparent;
    cursor: pointer;
    border-radius: 0 5px 5px 0;
    padding: 8px;
}

#searchButton svg {
    color: #666;
}

#searchInput:focus {
    outline: none;
    border-color: #5e17eb;
}

.category-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    align-items: center;
}

.category-title {
    margin-right: 5px;
    color: #666;
    font-weight: bold;
}

.category {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
    background-color: #f2f2f2;
    transition: background-color 0.3s;
    color: #333;
}

.category.active {
    background-color: #5e17eb;
    color: white;
}

.category:not(.active) {
    background-color: #f2f2f2;
    color: #333;
}

#searchResult {
    margin-top: 20px;
}

.description {
    width: 100%;
    font-size: smaller;
    color: rgb(192, 192, 192);
    text-align: center;
}

body {
    -moz-user-select: none; /* Firefox */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* Internet Explorer */
    -khtml-user-select: none; /* Konqueror HTML */
    -o-user-select: none; /* Opera */
    user-select: none; /* CSS3 */
}