Center.css

html, body {
    background: url(http://trilium.dftserver.top/share/api/images/b9lMNJ8cH3Xx/wallhaven-e7w37w.jpg); /* 灰色背景 */
    background-position: center;
    /* 背景图片居中 */
    background-repeat: no-repeat;
}

a {
    text-decoration: none;
    color: darkred;
    transition: color 0.3s, border-bottom 0.3s, border-top 0.3s;
}

a:hover {
  color: black; /* 鼠标移入时文字颜色变为白色 */
  border-top: 3px solid black;
  border-bottom: 3px solid black; /* 底部出现蓝色矩形框 */
  cursor: pointer;
}

ul li {
    list-style-type: none;
    /* 移除列表项前的项目符号 */
    padding-left: 0;
    /* 移除列表项内部的左内边距 */
    margin-left: 0;
    /* 移除列表项内部的左外边距 */
}

#layout {
    align-items: flex-start;
}

#main {
    margin: 25px 10px;
    border-radius: 20px;
    box-shadow: 0 0 10px 5px rgba(165, 170, 168, 0.253);
    backdrop-filter: blur(20px) brightness(150%) saturate(160%);
    background-color: rgba(255, 255, 255, 0.8);
}

#title {
    text-align: center;
    padding: 5px 20px;
    background: linear-gradient(135deg, rgba(23, 234, 217, 0.8) 0%, rgba(23, 234, 217, 0.5) 50%, rgba(96, 120, 234, 0.8) 100%);
    border-radius: 10px;
}

#title::before {
    content: "🚀"; /* 在标题前添加 Emoji */
    margin-right: 8px; /* 根据需要调整间距 */
    font-size: 24px; /* 根据需要调整大小 */
    vertical-align: middle; /* 垂直对齐 */
}

#parentLink {
    margin-right: 20px;
}

#menu {
    position: sticky;
    top: 25px;
    margin: 25px 10px;
    padding: 10px;
    border-radius: 20px;
    box-shadow: 0 0 10px 5px rgba(165, 170, 168, 0.253);
    overflow: hidden;
    backdrop-filter: blur(20px) brightness(150%) saturate(160%);
    background-color: rgba(255, 255, 255, 0.8);
}

#menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    /* 背景图片覆盖整个容器 */
    background-position: center;
    /* 背景图片居中 */
    background-repeat: no-repeat;
    /* 背景图片不重复 */
    filter: blur(0px);
    /* 添加模糊效果 */
    z-index: -1;
    /* 将伪元素置于内容下方 */
}

#menu>p:first-child {
    padding: 5px 20px;
    border-bottom: 2px solid #736e60;
    border-radius: 10px;
    color: #ffffff;
    background: url('https://images.unsplash.com/photo-1518531933037-91b2f5f229cc');
}

#menu>p:first-child a {
    color: #ffffff;
}

.ck-content pre {
    background: linear-gradient(135deg, #000000, #434343);
    color: #ff9b04;
    border-radius: 10px;
    font-family: 'Consolas', monospace;
    color: linear-gradient(135deg, #7117ea, #ea6060);
}

#content pre {
    background: linear-gradient(135deg, #000000, #434343);
    color: #ff9b04;
    border-radius: 10px;
    font-family: 'Consolas', monospace;
    color: linear-gradient(135deg, #7117ea, #ea6060);
}

#content h2::before {
    content: "🔥"; /* 在标题前添加 Emoji */
    margin-right: 8px; /* 根据需要调整间距 */
    font-size: 24px; /* 根据需要调整大小 */
    vertical-align: middle; /* 垂直对齐 */
}

#content ul li::before {
    content: "🔼"; /* 在标题前添加 Emoji */
}

#parentLink {
    font-weight: bold;
}

#parentLink a {
    padding-left: 10px;
    color: #ffffff;
}

#childLinks ul li {
    margin: 5px 10px;
    padding: 0px 8px;
    border-radius: 10px;
    background: linear-gradient(135deg, #fad7a1, #e96d71);
}

#childLinks.grid ul li a {
    border: none;
}

#childLinks.grid ul li a:hover {
    color: white;
    /* 鼠标放上时的文字颜色 */
    background-color: rgba(255, 255, 255, 0.2);
    /* 鼠标放上时的背景颜色 */
    backdrop-filter: saturate(200%) blur(20px);
    border-top: 3px solid rgba(255, 255, 255, 0.6);
    border-bottom: 3px solid rgba(255, 255, 255, 0.6); /* 底部出现蓝色矩形框 */
}

nav.grid ul {
    display: flex;
    flex-flow: row wrap;
    gap: 1rem;
}
nav.list {
    line-height: 1.5;
}

nav ul {
    list-style-type: none;
    padding: 0 1rem;
}