html{font-family:sans-serif;font-size:16px;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
@font-face {font-family: 'WaywardSansxxnas';src: url('../font/WaywardSansxxnas.ttf') format('truetype');font-weight: normal;font-style: normal;font-display: swap;}
@font-face {font-family: 'Nosifer';src: url('../font/Nosifer.ttf') format('truetype');font-weight: normal;font-style: normal;font-display: swap;}
body {margin: 0;padding: 0;}
.wrapper{display:flex;width: 100%; /* Full width */overflow:hidden;}
.sidebar{background: #fff;overflow:auto; /* Scrollable contents if the sidebar is too long *//*transition: width 0.5s;*/ /* Smooth resizing effect */transition:1s ease-out;-webkit-transition:1s ease-out;}
.sidebar label{display:none;}
#toggle-sidebar{display:none;}
.sidebar-toggle-button {display: none;}
/* Media query for tablet and desktop */
@media (min-width: 1081px) {
	.sidebar {
        width: 280px; /* Full width sidebar */
        position: fixed; /* Fixed sidebar 固定左侧栏不滚动*/
		flex: 0 0 auto; /* 不伸缩，固定宽度 */
		align-self: flex-start;/* 固定左侧栏靠左*/
        height: 100%; /* Full height */
        border-right: 2px solid #000; 
    }
    /*按钮放在这里，会在缩小窗口时显示在sidebar的右上角，独占一行*/
    .sidebar-toggle-button {
        display: block; /* Show toggle button */
        cursor: pointer; /* Cursor when hovering */
        position: absolute; /* Position at top right of sidebar */
        right: 0;
        top: 0;
        padding: 10px;
    }
    .content {
		flex-grow: 1;
        margin-left: 280px; /* Same as sidebar width */
        padding: 20px;
        display: grid;/* 内部div居中 */
        place-items: center;/* 内部div居中 */
		transition:1s ease-out;-webkit-transition:1s ease-out;
    }
}
/* Media query for mobile */
@media (max-width: 1080px) {
    .wrapper {
        flex-direction: column; /* Sidebar and content stacked */
    }
    .sidebar {
        width: 100%; /* Full width */
        height: auto; /* Reset height */
        position: relative; /* Relative position */
    }
	/*按钮放在这里，会在缩小窗口时显示在右上角，同上，可以复制来复制去*/

    .sidebar .side-event{
        display: none; /* Hide sidebar on mobile */
        border-bottom: 2px solid #000; 
		padding-top: 50px;
    }
    .sidebar label{ 
	width: 100%; /* Full width */
	text-align: center;
        display: block;
        float: right;
        font-size: 1.5em;
		color:#fff;
        background: #333;
        padding:3px 8px 3px 8px; 
   } 
    .content {
        /*padding: 20px;*/
		padding: 0;
        margin:0px;
        width: auto; /* Full width */
        min-width: 0; /* 防止内容过多导致右边侧栏缩小 */
		transition:1s ease-out;-webkit-transition:1s ease-out;
    }
 
    /* Toggle sidebar visibility */
    .wrapper input[type="checkbox"]:checked ~ .sidebar {
        width: 100%; /* Expand sidebar */
    }
 
    /* Toggle sidebar visibility */
    .wrapper input[type="checkbox"]:checked ~ .sidebar .side-event{
        display: block; /* Show sidebar */		
    }
	.sidebar .side-event {
		animation: hideIndex 0.5s;
		-moz-animation: hideIndex  0.5s; /* Firefox */
		-webkit-animation: hideIndex  0.5s; /* Safari and Chrome */
		-o-animation: hideIndex  0.3s; /* Opera */
	}
	@keyframes hideIndex{
		0%{ opacity: 0; transform: translate(0, -100px) }
		100%{opacity: 1; transform: translate(0, 0) }
	}
}