#gametitle {
	float: left;
}



/* * {
	margin: 0;
	padding: 0;
} */

/* 设置网页的背景颜色为深蓝色，模拟太空的效果 */
/* body {
	background-color: #000033;
} */

/* 设置游戏logo和名字的样式 */
.logo {
	display: inline-block;
	margin: 10px;
	vertical-align: middle;
}

.title {
	display: inline-block;
	margin: 10px;
	vertical-align: middle;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 36px;
	color: white;
}

.itemImg {
	border: 5px solid rgb(61, 197, 186);
}

/* 设置登录、注册、查看排行榜和游戏说明的按钮的样式 */
.button {
	display: inline-block;
	/* margin: 10px; */
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 10%;
	padding: 10px;
	border: 2px solid white;
	border-radius: 10px;
	font-family: Arial, Helvetica, sans-serif;
	/* vertical-align: middle; */
	font-size: 18px;
	color: black;
	/* 修改按钮的字体颜色为黑色，增加可见性 */
	cursor: pointer;
}

/* 设置登录、注册、查看排行榜和游戏说明的按钮的样式 */
.button:hover {
	display: inline-block;
	/* margin: 10px; */
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 10%;
	padding: 10px;
	border: 2px solid rgb(94, 94, 94);
	border-radius: 10px;
	font-family: Arial, Helvetica, sans-serif;
	/* vertical-align: middle; */
	font-size: 18px;
	color: black;
	/* 修改按钮的字体颜色为黑色，增加可见性 */
	cursor: pointer;
}






/* 设置游戏画布的样式 */
#game {
	display: block;
	width: 1280px;
	/* width: 80%;
	height: 80%; */
	height: 720px;
	margin: 0 auto;
	/* 居中显示 */
	border: 5px solid white;
	/* 添加白色边框 */
	justify-content: center;
	align-items: center;
	/* margin-left: 20%; */
}

/* 设置网页的容器的样式 */
#container {
	width: 70%;
	/* 设置容器的宽度为80% */
	margin: 0 auto;
	/* 居中显示 */
	/* text-align: center; */
	/* background-color: #fff; */
}

p {
	color: antiquewhite;
	text-align: center;
	margin-left: 20%;
	margin-right: 20%;
}

h2 {
	color: antiquewhite;
	text-align: center;
	margin-left: 0%;
}

body {
	/* background: linear-gradient(#141e30, #3d89df); */

	background-color: #040c33;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='432' height='432' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23363636' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%23b5b5b5'%3E%3Ccircle cx='769' cy='229' r='6'/%3E%3Ccircle cx='539' cy='269' r='6'/%3E%3Ccircle cx='603' cy='493' r='6'/%3E%3Ccircle cx='731' cy='737' r='6'/%3E%3Ccircle cx='520' cy='660' r='6'/%3E%3Ccircle cx='309' cy='538' r='6'/%3E%3Ccircle cx='295' cy='764' r='6'/%3E%3Ccircle cx='40' cy='599' r='6'/%3E%3Ccircle cx='102' cy='382' r='6'/%3E%3Ccircle cx='127' cy='80' r='6'/%3E%3Ccircle cx='370' cy='105' r='6'/%3E%3Ccircle cx='578' cy='42' r='6'/%3E%3Ccircle cx='237' cy='261' r='6'/%3E%3Ccircle cx='390' cy='382' r='6'/%3E%3C/g%3E%3C/svg%3E");

	/* background-color: black; */
	margin: 0;
	/* margin-bottom: 33%; */
	padding: 0;
}

.body2 {
	/* background: linear-gradient(#141e30, #3d89df); */

	background-color: #040c33;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='432' height='432' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23363636' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%23b5b5b5'%3E%3Ccircle cx='769' cy='229' r='6'/%3E%3Ccircle cx='539' cy='269' r='6'/%3E%3Ccircle cx='603' cy='493' r='6'/%3E%3Ccircle cx='731' cy='737' r='6'/%3E%3Ccircle cx='520' cy='660' r='6'/%3E%3Ccircle cx='309' cy='538' r='6'/%3E%3Ccircle cx='295' cy='764' r='6'/%3E%3Ccircle cx='40' cy='599' r='6'/%3E%3Ccircle cx='102' cy='382' r='6'/%3E%3Ccircle cx='127' cy='80' r='6'/%3E%3Ccircle cx='370' cy='105' r='6'/%3E%3Ccircle cx='578' cy='42' r='6'/%3E%3Ccircle cx='237' cy='261' r='6'/%3E%3Ccircle cx='390' cy='382' r='6'/%3E%3C/g%3E%3C/svg%3E");

	/* background-color: black; */
	margin: 0;
	margin-bottom: 33%;
	padding: 0;
}

canvas {
	/* background: #000; */
	background: linear-gradient(#000000, #023a7e);
	display: block;
	cursor: none;
	/* transform: scale(0.5); */
}

.introBox {
	width: 80%;
	height: 100%;
	margin-left: 10%;
	border: 1px solid #000;
	/* background: linear-gradient(#141e30, #3d89df); */
	text-align: center;
}

.gameBox {
	width: 80%;
	height: 100%;
	margin-left: 10%;
	border: 1px solid #000;
	/* background-color: black; */
	text-align: center;
}

.introList {
	/* display: inline-block; */
	width: 30%;
	height: 300px;
	margin: 0 0 0 2.5%;
	float: left;
	text-align: center;
}

.introBlock {
	margin: auto;
	text-align: center;
	/* background-color: black; */
	color: antiquewhite;

}

#loginWindow {
	display: none;
	background-color: crimson;
	z-index: 11;
	width: 600px;
	height: 600px;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	margin: auto;
}

input {
	background: none;
	outline: none;
	border: 0px;
}

.userInfo {
	color: bisque;
	/* text-align: left; */
	text-align: left;
	/* margin-right: 0%; */
}

.x {
	position: relative;
	margin-left: 300%;
	top: -30px;
}