typeface.css

			@font-face {
				font-family:'MinecraftTen-VGORe';
				src: url(MinecraftTen-VGORe.ttf);
			}
			.MinecraftTen-VGORe{
				font-family: 'MinecraftTen-VGORe';
				font-size: 50px;
				text-shadow: none;
			}
			@font-face {
				font-family:'Minecraft字体';
				src: url(Minecraft字体.ttf);
			}
			.Minecraft字体{
				font-family: 'Minecraft字体';
				font-size: 50px;
				text-shadow: none;
			}
/* 字体*/			
			
	body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    background-image: linear-gradient(rgba(49, 50, 52, 0.5), rgba(49, 50, 52, 1.0)), url('images/background.png');
    background-repeat: repeat-y;
    background-position: center, center;
    background-attachment: fixed, fixed;
    z-index: -4;
}

.content {
    position: relative;
    z-index: 1;
    padding: 20px;
    
}

/* 周年庆样式 */


  table {
padding: 0;
}
/*
html {
  background-color: #313234;
}  
*/


p {
    color: white;
}


.text-with-background {
    background-color: #48494B; /* 设置文本的背景颜色 */
    padding: 10px;
    border: 4px solid #000; /* 可选：添加边框 */
    border-color: #58595C #282828 #282828 #58595C; /* 上 右 下 左 */ /* 设置文本周围的内边距 */
}




/* 定义按钮的默认样式 */
.button-style {
  /* 设置按钮的大小和边框 */
  width: 120px;
  height: 40px;
  border: 2px solid;
  border-color: #EFEFEF #707070 #707070 #EFEFEF; /* 上 右 下 左 */
  border-radius: 0px; /* 可选的圆角效果 */
 
  /* 设置内部填充颜色 */
  background-color: #C6C6C6;
  outline: solid 2px black;/* 外圈黑色边框 */
  /* 设置文本样式 */
  color: #000;
  font-size: 14px;
  font-family: Minecraft字体;
  font-weight: #;
  text-align: center;
  line-height: 40px; /* 使文本垂直居中 */

  /* 鼠标悬停样式 */
  transition: background-color 0.0s, border-color 0.0s;
  cursor: pointer;

  /* 按下按钮的样式 */
}
.button-style:active {
  border-color: #015301 #2BCD1D #2BCD1D #015301; /* 上 右 下 左 */
  background-color: #208305;
  outline: solid 2px white;/* 外圈白色边框 */
}

/* 鼠标悬停时的样式 */
.button-style:hover {
  border-color: #015301 #2BCD1D #2BCD1D #015301; /* 上 右 下 左 */
  background-color: #208305;
  outline: solid 2px white;/* 外圈白色边框 */
}






.image-container {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: center; /* 或其他值，取决于你的布局 */
}

.image-container img {
    width: 271px;
    height: 100px;
    /* 如果需要保持图片的长宽比 */
    object-fit: cover; 
}


/* 弹窗图片 */
.window-img {
				border: 2px solid #000000;
}
/* 定义矩形样式预设组 */
.style-group {
    /* 第一个矩形样式 */
    .rectangle-1 {
        width: 200px;
        height: 100px;
        background-color: #ff0000;
        border: 2px solid #000000;
        border-radius: 10px;
    }
    
    /* 第二个矩形样式 */
    .rectangle-2 {
        width: 150px;
        height: 50px;
        background-color: #00ff00;
        border: 2px solid #000000;
        border-radius: 5px;
    }
    
    /* 第三个矩形样式 */
    .rectangle-3 {
        width: 250px;
        height: 120px;
        background-color: #0000ff;
        border: 2px solid #ffffff;
        border-radius: 0;
    }
}





.custom-modal-background {
            display: flex;
            flex-direction: column;
            width: 100％;
            height: 20vh; /* 设置高度为屏幕高度的五分之一 */
            background-color: transparent;
            position: relative;
        }
        .top-border, .middle, .bottom-border {
            width: 100%;
            position: relative;
        }
        .top-border {
            flex-grow: -1;
            background-color: #48494B;
            border-width: 2px 2px 2px 2px;
            border-style: solid;
            border-color: #5B5D5C #6D6D6D #6D6D6D #5B5D5C; /* 上下左右 */
            padding: 20px;
            box-sizing: border-box;
        }
        .middle {
            flex-grow: -1;
            background-color: #313234;
            border-width: 2px 2px 2px 2px;
            border-style: solid;
            border-color: #313234 #313234 #313234 #313234; /* 上下左右 */
            padding: 20px;
            box-sizing: border-box;
        }
        .bottom-border {
            flex-grow: -1;
            background-color: #48494B;
            border-width: 2px 2px 2px 2px;
            border-style: solid;
            border-color: #5B5D5C #48494B #5B5D5C #48494B; /* 上下左右 */
            padding: 20px;
            box-sizing: border-box;
        }
        /* 模态窗口内其他元素样式 */
        .close {
            color: #FFFFFF;
            float: right;
            font-size: 20px;
            font-family: Minecraft字体;
            position: absolute;
            top: 6px;
            right: 10px;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
        .confirm {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }





.img-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height:; /* 或者你想要的高度 */
    width: 100%; /* 或者你想要的宽度 */
}






        .falling-character {
            position: absolute;
            color: #fff;
            font-size: 50px;
            animation-name: fall;
            animation-duration: 10s;
            animation-fill-mode: forwards;
            animation-timing-function: linear;
            opacity: 1;
        }
        @keyframes fall {
            0% { transform: translateY(-100vh); /* 从屏幕顶部外开始 */ }
            100% { transform: translateY(100vh); /* 下落到屏幕底部 */ opacity: 0; }
        }
        
        
        
        
        
/* 披风图片 */        
  .image-container {
    width: 200px; /* 矩形区域的宽度 */
    height: 300px; /* 矩形区域的高度 */
    overflow: hidden; /* 隐藏超出容器的部分 */
    border: 4px solid #000; /* 可选：添加边框 */
    border-color: #414244 #232325 #232325 #414244; /* 上 右 下 左 */
  }
  
  
  .image-container img {
    width: 100%; /* 图像宽度等于容器宽度 */
    height: 100%; /* 图像高度等于容器高度 */
    object-fit: cover; /* 保持图像长宽比，使图像充满容器，超出部分将被裁剪 */
  }


.image-container2 {
    border: 4px solid #000; /* 可选：添加边框 */
    border-color: #414244 #232325 #232325 #414244; /* 上 右 下 左 */
  }



/* sidebar */

.sidebar-style {
  background-color: #313234;
  width: 250px;
  height: 100vh;
  position: fixed;
  top: 0;
  left: -270px;
  transition: left 0.3s;
  /* 设置不同的边框颜色和宽度 */
  border-top: 5px solid #414244; /* 上边框 */
  border-right: 5px solid #232325; /* 右边框 */
  border-bottom: 5px solid #232325; /* 下边框 */
  border-left: 5px solid #414244; /* 左边框 */
}

#sidebar {
				z-index: 2000;
}
#menu-button {
  /* 设置按钮的大小和边框 */
  width: 60px;
  height: 60px;
  border: 2px solid;
  border-color: #EFEFEF #707070 #707070 #EFEFEF; /* 上 右 下 左 */
  border-radius: 0px; /* 可选的圆角效果 */

  /* 设置内部填充颜色 */
  background-color: #C6C6C6;

  /* 设置文本样式 */
  color: #000;
  font-size: 40px;
  font-family: Minecraft字体;
  font-weight: 100%;
  text-align: center;
  line-height: 40px; /* 使文本垂直居中 */

  /* 鼠标悬停样式 */
  transition: background-color 0.0s, border-color 0.0s;
  cursor: pointer;
  position: fixed; /* 使用fixed定位 */
  top: 10px;        /* 从顶部偏移10px */
  right: 10px;      /* 从右侧偏移10px */
  z-index: 2000;     /* 确保按钮在层级上位于顶层 */
  outline: solid 2px black;/* 外圈黑色边框 */
}
  /* 按下按钮的样式 */

#top-button {
  /* 设置按钮的大小和边框 */
  width: 60px;
  height: 60px;
  border: 2px solid;
  border-color: #EFEFEF #707070 #707070 #EFEFEF; /* 上 右 下 左 */
  border-radius: 0px; /* 可选的圆角效果 */

  /* 设置内部填充颜色 */
  background-color: #C6C6C6;

  /* 设置文本样式 */
  color: #000;
  font-size: 40px;
  font-family: Minecraft字体;
  font-weight: 100%;
  text-align: center;
  line-height: 40px; /* 使文本垂直居中 */

  /* 鼠标悬停样式 */
  transition: background-color 0.0s, border-color 0.0s;
  cursor: pointer;
  position: fixed; /* 使用fixed定位 */
  top: 80px;        /* 从顶部偏移10px */
  right: 10px;      /* 从右侧偏移10px */
  z-index: 100;     /* 确保按钮在层级上位于顶层 */
  outline: solid 2px black;/* 外圈黑色边框 */
   
}

#menu-button:active,
#top-button:active {
  border-color: #015301 #2BCD1D #2BCD1D #015301; /* 上 右 下 左 */
  background-color: #208305;
  outline: solid 2px white;/* 外圈白色边框 */
}

/* 鼠标悬停时的样式 */
#menu-button:hover,
#top-button:hover {
  border-color: #015301 #2BCD1D #2BCD1D #015301; /* 上 右 下 左 */
  background-color: #208305;
  outline: solid 2px white;/* 外圈白色边框 */
}

#mbe-button {
  /* 设置按钮的大小和边框 */
  width: 60px;
  height: 60px;
  border: 2px solid;
  border-color: #619E50 #1D4D13 #1D4D13 #619E50; /* 上 右 下 左 */
  border-radius: 0px; /* 可选的圆角效果 */

  /* 设置内部填充颜色 */
  background-color: #3B8526;

  /* 设置文本样式 */
  color: #FFF;
  font-size: 40px;
  font-family: Minecraft字体;
  font-weight: 100%;
  text-align: center;
  line-height: 40px; /* 使文本垂直居中 */

  /* 鼠标悬停样式 */
  transition: background-color 0.0s, border-color 0.0s;
  cursor: pointer;
  position: fixed; /* 使用fixed定位 */
  top: 150px;        /* 从顶部偏移10px */
  right: 10px;      /* 从右侧偏移10px */
  z-index: 100;     /* 确保按钮在层级上位于顶层 */
  outline: solid 2px black;/* 外圈黑色边框 */
   
}

#mbe-button:active {
  border-color: #015301 #2BCD1D #2BCD1D #015301; /* 上 右 下 左 */
  background-color: #1D4D13;
  outline: solid 2px white;/* 外圈白色边框 */
}

/* 鼠标悬停时的样式 */
#mbe-button:hover {
  border-color: #1A4411 #50913D #50913D #1A4411; /* 上 右 下 左 */
  background-color: #1D4D13;
  outline: solid 2px white;/* 外圈白色边框 */
}


/* 底部json ui容器 */
.under-window {
    border: 2px solid;
				border-color: #EFEFEF #707070 #707070 #EFEFEF; 
				/* 上 右 下 左 */
    background-color: #C6C6C6;
    outline: solid 2px black;
    width: 80%;
    height: 160px;
    top: 150px;  
    right: 10px;      
    justify-content: center; /* 水平居中 */
    
}