* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
 }

 /* 整体页面背景设置为黑色，文字颜色为白色，采用弹性布局使内容垂直居中 */

 body {
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
 	/* min-height: 100vh; */
 	background-color: #000;
 	color: #fff;
 	font-family: 'Arial', sans-serif;
 	overflow: auto;
 	/* 隐藏页面溢出部分，使特效更整洁 */
 }

			
			/* 全局样式 */
			body,
			html {
				padding: 0;
				margin: 0;
				box-sizing: border-box;
				height: 100%;
				background: linear-gradient(45deg, #000, #222, #000);
				color: white;
				margin: 0;
				overflow: auto;
				animation: gradient 15s ease infinite;
				background-size: 400% 400%;
				font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			}

			/* 背景渐变动画 */
			@keyframes gradient {
				0% {
					background-position: 0% 50%;
				}

				50% {
					background-position: 100% 50%;
				}

				100% {
					background-position: 0% 50%;
				}
			}

			/* 布局样式 */
			body,
			#box,
			#top {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
			}

			/* 顶部区域样式 */
			#top {
				margin: 20px 0;
			}

			/* 顶部标题文字颜色闪烁动画，速度减慢到 5s */
			#top h1,
			#top h2,
			#top h3,
			#top h4 {
				animation: randomColor 5s infinite alternate;
				margin: 5px 0;
				text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
			}

			/* 文字颜色闪烁动画关键帧 */
			@keyframes randomColor {
				0% {
					color: #ff0000;
				}

				25% {
					color: #00ff00;
				}

				50% {
					color: #0000ff;
				}

				75% {
					color: #ffff00;
				}

				100% {
					color: #ff00ff;
				}
			}

			/* 上传区域样式 */
			#box {
				color: #aaa;
				/*height: 25em;*/
				/*width: 35em;*/
				margin: 0 auto;
				max-width: 90%;
				max-height: 90%;
				background-color: #333;
				border-radius: 1em;
				border: 2px solid #555;
				box-shadow: 0 0 20px rgba(51, 136, 255, 0.2);
				position: relative;
				padding: 20px;
				text-align: center;
				transition-duration: 0.3s;
			}

			/* 上传区域鼠标悬停效果 */
			#box:hover,
			#box[drag] {
				border-color: #38f;
				color: #ddd;
				box-shadow: 0 0 30px rgba(51, 136, 255, 0.8);
				transform: scale(1.02);
			}

			/* 文件输入框样式 */
			#input {
				cursor: pointer;
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				opacity: 0;
			}

			#display {
				width: 100% !important;
				height: 100% !important;
			}

			/* 通用按钮和选择框样式 */
			select,
			button {
				padding: 0.8em 1.2em;
				/* margin: 1em; */
				width: auto;
				font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
				font-weight: bold;
				font-size: 18px;
				background-color: #444;
				color: #aaa;
				border-radius: 0.6em;
				border: 1px solid #555;
				cursor: pointer;
				transition-duration: 0.3s;
				box-shadow: 0 0 10px rgba(51, 136, 255, 0.1);
			}

			/* 按钮和选择框鼠标悬停效果 */
			select:hover,
			button:hover {
				background-color: #666;
				color: #ddd;
				box-shadow: 0 0 20px rgba(51, 136, 255, 0.8);
				transform: scale(1.05);
			}

			/* 标志图片样式 */
			.logo {
				width: 135px;
				height: 135px;
				filter: drop-shadow(0 0 15px white);
				animation: spin 25s linear infinite;
				margin-bottom: 20px;
				border-radius: 50%;
			}

			/* 标志图片旋转动画 */
			@keyframes spin {
				from {
					transform: rotate(0deg);
				}

				to {
					transform: rotate(360deg);
				}
			}

			/* 上传提示文字样式 */
			#box p {
				margin: 10px 0;
			}