/*本文档用于存放用户栏盒子*/








#User{/*用户区域 1 */
		width: 350px;
		height: 300px;
		margin-right: 20px;
		opacity: 0;
		transition: opacity 0.3s ease-in-out;
	}
		#user-id{/* id 2 */
			width: auto;
			height: 60px;
		}
			#head_portrait{/* 头像 3 */
				width: 60px;
				height: 60px;
				border-radius: 30px;
				float: left;
				background-image: url(img/head_portrait.png);
				background-size: cover;
			}
			#user_name{/*用户名盒子 3 */
				width: auto;
				height: 100%;
				margin-left: 2%;
				float: left;
				align-items: center;
			}
			.user_name{/*用户名 3 */
				font-size: 20px;
				color: white;
				z-index: -99;
				cursor: default;
			}
			#hello{/*问候语盒子(背景虚化) 3 */
				width: 100%;
				height: 55%;
				margin: 4% 0 0 0;
				border-radius: 5px;
				background-color: black;
				background: rgba(61, 59, 72, 0.5);
				backdrop-filter: blur(4px);
				transition:backdrop-filter 0.4s ease;
			}
			#left_top,#right_bottom{/*双引号 3 */
				width: 30px;
				height: 30px;
				position: fixed;
				align-items: center;
				justify-content: center;
				font-size: 30px;
				font-family: '方正姚体';
				font-weight: 800;
				color: white;
			}
			#left_top{/*左上角双引号 3 */
				top: 5px;
				left: 0;
			}
			#right_bottom{/*右下角双引号 3 */
				bottom: 0;
				right: 0;
			}
			#helloword{/*问候语内容盒子 3 */
				width: 85%;
				height: 65%;
				position: fixed;
				top: 20%;
				left: 8%;
				line-height: 20px;
			}
				.helloword{/*问候语标题 4 */
					text-align: left;
					margin: 0;
					color: white;
					font-family: Bradley Hand ITC;
					font-weight: 900;
					font-style: italic;
					font-size: 27px;
				}
				.word{/*问候语内容 4 */
					width: 100%;
					text-align: left;
					margin-top: 20px;
					color: white;
					font-weight: 100;
					font-size: 13px;
				}
			#tool{/*小工具盒子 3 */
				width: 350px;
				height: 20px;
				margin-top: 10px;
				border-radius: 5px;
				background: rgba(255, 255, 255, 0.8);
				backdrop-filter: blur(10px);
				transition: 0.5s;
				text-align: center;
				font-size: 13px;
				color: black;
			}
				#tool_title{/*小工具盒子标题 4 */
					width: 350px;
					height: 20px;
					position: absolute;
					background-color: red;
				}
				#tool_box{/*小工具盒子（展开） 4 */
					height: 40px;
					width: 350px;
					opacity: 0;
					transition: 0s;/*鼠标移开小盒子消失的时间*/
				}
				#tool_box_1,#tool_box_2,#tool_box_3,#tool_box_4{/*小工具选项 4 */
					width: 70px;
					height: 40px;
					float: left;
					border-radius: 5px;
					margin: 0 8.75px 0 8.75px;
					background: rgba(61, 59, 72, 0.8);
					opacity: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					transition: 0.5s;/*鼠标移开小盒子后悬浮效果消失时间*/
					color: white;
					font-size: 11px;
				}
			#air{/*防止小工具盒子抽搐的盒子 3 */
				width: 350px;
				height: 60px;
				backdrop-filter: blur(0px);
			}
				
/**************************************************鼠标悬浮效果****************************************/

#hello:hover{/*问候语盒子(背景虚化)*/
		transition: 0.3s;
		backdrop-filter: blur(14px);
	}
	
	#tool:hover{
		height: 40px;
		transition: 0.1s;/*白色盒子鼠标悬浮动画（
		隐藏）*/
		background: rgba(61, 59, 72, 0.2);
		backdrop-filter: blur(1px);
		font-size: 0px;
	}
	
	#tool_box:hover{
		transition: 0.2s;/*鼠标悬浮所有小盒子出现时间*/
		/* transition-delay: 0.2s; */
		opacity: 1;
		margin-top: 0px;
	}
	
	#tool_box_1:hover,#tool_box_2:hover,#tool_box_3:hover,#tool_box_4:hover{
		width: 73.5px;
		margin: 0 7px 0 7px;
		background-color: white;
		opacity: 0.8;
		transition: 0.2s;/*单个小盒子鼠标悬浮动画*/
		/* transition-delay: 10s; */
		color: black;
		cursor: pointer;
		font-size: 12px;
	}