@import url(https://fonts.googleapis.com/css2?family=WindSong:wght@400&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Bentham:wght@400&display=swap);

:root {
	--body-color: #1b1818;
	--body-bg-color: #2b2a28;
	--link-visited: #a80000;
	--link-focus-outline: #1660f3;
	--pre-bg-color: #e8edf2;
	--kbd-bg-color: #fff;
	--table-border-color: #000;
	--sidenote-target-border-color: #ddd688;
	--footnotes-border-color: #636363
}

body {
	font-family: Bentham, Georgia, Cambria, Times New Roman, Times, serif;
	filter: invert(100%);
	background-color: var(--body-bg-color);
	color: var(--body-color);
	line-height: 1.8;
	color: #444443;
	font-size: 1.4em;
	margin: 0;
	border-radius: 0;
	text-align: center;
	padding: 100px 0 100px 0;
	user-select:none;
}

#picture {
	max-width: 100px;
	filter: invert(1)
}

.number {
	border: 0;
	size: 40%
}

a {
	color: #111;
	text-decoration-color: rgba(0, 0, 0, .4);
	padding: 5px;
	transition: background-color 0.1s ease-in-out;
}

a:hover {
	text-decoration:none;
	background-color: #2b2a28;
	color:#d4d5d7;

}

h1 {
	transition: text-shadow 0.1s ease;
	margin: .67em 0;
	text-align: center;
	font-weight: 400;
	font-family: WindSong, cursive;
	font-size: min(40px,7vw);
}
h1:hover{
    text-shadow: 14px 1px 20px rgba(0, 0, 0, 0.5);
}
#cursor {
    position: fixed;
    width: 16px;
    height: 16px;
    background: #000;
    border-radius: 8px;
    opacity: 0.25;
    z-index: 128;
    pointer-events: none;
    transition-property: background, opacity, transform;
}
svg{
	filter: invert(1)
}
#cursor.hidden {
    opacity: 0;
}

#cursor.hover {
    opacity: 0.1;
    transform: scale(2.5);
}

#cursor.active {
    opacity: 0.5;
    transform: scale(0.5);
}

.panel {
    width: 280px;
    height: 50px;
    margin: 20px auto;
    overflow: hidden;
    text-align: center;
    transition: width 0.5s ease, height 0.5s ease,background-color 0.1s ease-in-out; /* 调整过渡时间和缓动效果 */
    cursor: pointer;
	color: #111;
	text-decoration-color: rgba(0, 0, 0, .4);
	padding: 5px;
}
.panel:hover {
	text-decoration:none;
	background-color: #2b2a28;
	color:#d4d5d7;

}
.panel.open {
    width: 300px; /* 展开时的宽度 */
    height: 300px; /* 展开时的高度 */
}

.panel-content {
    display: none;
    padding: 10px;
    text-align: center; /* 面板内容左对齐 */
}

.panel.open .panel-content {
    display: block;
}

.panel a{
	text-decoration:none;
	background-color: #2b2a28;
	color:#d4d5d7;
}