body{
	/* 尺寸 */
	height: 100vh;
	/* 盒模型 */
	display: flex;
	align-items: center;	/* 纵向排列方式 */
	justify-content: center;	/* 横向排列方式 */
	/* 装饰 */
	background-color: #ffffff;
	background-image: url(img/loginBackground.jpg);
	background-repeat: no-repeat;	/* background-repeat 是否重复图片 */
	background-position: center;	/* background-position 图片的起始位置 */
	background-size: cover;	/* background-size 图片的大小 cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小 */
}

.login-container{
	/* 尺寸 */
	width: 100%;
	max-width: 400px;
	height: 400px;
	/* 盒模型 */
	border-radius: 20px;
	display: flex;
	flex-direction: column;	/* flex-direction 属性规定弹性盒子内部子项的排布方向 */
	justify-content: center;
	/* 字体排版 */
	text-align: center;
	/* 装饰 */
	background-color: #fff;
	box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.15);	/* 水平偏移 垂直偏移 模糊半径 扩散半径 颜色 */
	
}

.form-group{
	/* 尺寸 */
	max-width: 400px;
	/* 盒模型 */
	margin: 20px;
	border-radius: 8px;	/* 圆角边框 */
	/* 字体排版 */
	text-align: center;
	font-family: "Microsoft YaHei", "微软雅黑";

}

button {
	/* 尺寸 */
	width: 90%;
	height: 45px;
	/* 盒模型 */
	border-radius: 8px;	/* 圆角边框 */
	border: none;
	/* 字体排版 */
	font-family: "Microsoft YaHei", "微软雅黑";	/* 回退机制如果英文的字体没找到就去找中文字体 */
	color: white;	/* 字体颜色 */
	font-size: 20px;
	/* 装饰 */
	background-color: #3370FF;	
	transition: transform 0.1s ease, background-color 0.2s ease;
	/* transition: 声明“我要加过渡动画” ease 速度曲线：慢 → 快 → 慢 */
}

button:active{  /* 只有鼠标左键按下或手指按下的瞬间生效，松手即恢复 */
	/* 尺寸 */
	transform: scale(0.99);  /* 缩放0.98倍 */
	/* 装饰 */
	background-color: #244fb3;
	box-shadow: 0px 2px 4px rgba(22, 93, 255, 0.1);

}

input{
	/* 尺寸 */
	width: 90%;
	/* 盒模型 */
	padding: 14px;
	border-radius: 8px ;	/* 圆角边框 */
	/* 字体排版 */
	font-size: 20px;
	/* 装饰 */
	border: 1px solid #c5cddb;	/* 边框宽度 | 边框样式 | 边框颜色 */
	background: #fff
}