#footer,
.cmd .title span,
.meBox,
.meBox-text {
	text-align: center
}

.cmd,
.meBox-text,
.meBox-title p {
	overflow: hidden;
	transition: all .3s
}

.cmd,
.cmd2,
.headPhoto {
	position: relative
}

* {
	margin: 0;
	padding: 0
}

body,
html {
	width: 100%;
	height: 100%
}

body {
	background-image: linear-gradient(to left, rgba(255, 0, 149, .2), rgba(0, 247, 255, .2)), url(https://cdn.jsdelivr.net/gh/hitushen/blog_imges/imges/83968b7d177c636fbd78242efe45f275.png);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover
}

#box {
	width: 1200px;
	height: 100px;
	margin: 0 auto;
	padding-top: 5%
}

.meBox {
	float: left;
	width: 20rem;
	height: 25rem;
	background-color: #fff;
	margin-top: 100px;
	border-radius: 2%;
	transition: all .3s
}

.meBox:hover {
	width: 21rem;
	height: 26rem;
	margin: 95px 0 0 -5px;
	box-shadow: 0 0 10px rgba(0, 0, 0, .4)
}

.headPhoto {
	width: 8rem;
	height: 8rem;
	background: url(../img/photo_2022-09-10_14-52-23.jpg) no-repeat;
	background-size: cover;
	border-radius: 50%;
	top: -15%;
	left: 50%;
	margin-left: -4rem;
	transition: all .3s
}

.meBox:hover .headPhoto {
	width: 9rem;
	height: 9rem;
	margin: -.5rem 0 0 -4.5rem;
	transform: rotate(360deg)
}

.headPhoto:hover {
	box-shadow: 0 0 10px rgba(0, 0, 0, .3)
}

.meBox-title {
	width: auto;
	margin: 0 auto
}

@keyframes typing {
	from {
		width: 0
	}
}

@keyframes blink-caret {
	50% {
		border-color: transparent
	}
}

 .meBox-title p {
	font-size: 1.2rem;
	border-right: .1em solid;
	width: 7ch;
	white-space: nowrap;
	animation: typing 2s steps(20, end), blink-caret .3s step-end infinite alternate;
	margin: -1.8rem 0 0 110px
} 

.meBox:hover .meBox-title p {
	font-size: 1.3rem;
	
}

.meBox-title .fg {
	width: 80%;
	height: 2px;
	background-image: linear-gradient(to left, #3498db, #2980b9);
	margin: 5% 0 0 10%
}

.meBox-text {
	width: 80%;
	height: 45%;
	color: #464646;
	animation-name: meBox-text;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	margin: 5% 0 0 10%
}

.meBox-text p {
	margin-top: 5px
}

.meBox:hover .meBox-text {
	font-size: 1.05rem
}

@keyframes meBox-text {
	0% {
		transform: translateY(50px);
		color: #fff
	}

	100% {
		transform: translateY(0);
		color: #464646
	}
}

.meBox-Button {
	width: 100%;
}

.meBox-Button a {
	display: inline-block;
	float: left;
	width: 33.3%;
	height: 50px;
	margin-top: 13px;
	line-height: 50px;
	text-decoration: none;
	color: gray;
	transition: all .3s
}

.meBox-Button a:hover {
	color: #0084ff;
	font-size: 1.2rem
}

.meBox:hover .meBox-Button a {
	width: 33.3%;
	margin-top: 10px
}

#cmdBox {
	width: 710px;
	height: 550px;
	float: right
}

.cmd {
	width: 600px;
	height: 400px;
	border-radius: 10px 10px 5px 5px;
	background-color: rgba(255, 255, 255, .9);
	font-size: 14px;
	color: #58595c;
	top: 0;
	left: 0
}

.cmd:hover {
	width: 610px;
	height: 410px;
	box-shadow: 0 0 10px rgba(0, 0, 0, .4);
	margin: -5px 0 0 -5px;
	z-index: 1
}

.cmd .title {
	width: 100%;
	height: 25px;
	background-image: linear-gradient(to top, #b8b8b8, #fff);
	font-size: 14px;
	line-height: 25px
}

.cmd .title span {
	display: inline-block;
	width: 70%
}

.cmd .click {
	margin-left: 10px;
	float: left
}

.cmd .click div {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin: 8px 0 0 10px;
	float: left
}

.cmd .click .red {
	background-color: #ff1b22;
	box-shadow: 0 0 1px #ff1b22
}

.cmd .click .red:hover {
	background-color: #ff6268;
	box-shadow: 0 0 3px #ff1b22
}

.cmd .click .yellow {
	background-color: #ffaf00;
	box-shadow: 0 0 1px #ffaf00
}

.cmd .click .yellow:hover {
	background-color: #ffd373;
	box-shadow: 0 0 3px #ffaf00
}

.cmd .click .green {
	background-color: #00931a;
	box-shadow: 0 0 1px #00931a
}

.cmd .click .green:hover {
	background-color: #00c424;
	box-shadow: 0 0 3px #00931a
}

.cmdText {
	padding-top: 10px;
	padding-left: 15px
}

.cmd2 {
	top: -150px;
	left: 300px
}

.cmd2 .cmdText .ul {
	margin-left: 15px
}

.cmd2 .cmdText .ul a {
	text-decoration: none;
	color: #58595c
}

.cmd2 .cmdText .ul a:hover {
	color: #0084ff
}

#footer {
	width: 100%;
	color: #fff;
	float: left;
	position: fixed;
	bottom: 0;
	margin-bottom: 10px;
	font-size: .9em
}

#footer a {
	text-decoration: none;
	color: #fff
}

#footer a:hover {
	color: #0051ff
}

@media screen and (max-width:1250px) {
	#box {
		width: 100%
	}

	.meBox {
		margin-left: 3%
	}

	.meBox:hover {
		width: 21rem;
		height: 26rem;
		margin: 95px 0 0 2.5%
	}

	#cmdBox {
		margin-right: 3%
	}
}

@media screen and (max-width:1120px) {
	.meBox {
		float: none;
		margin: 100px auto
	}

	.meBox:hover {
		width: 20rem;
		height: 25rem;
		margin: 105px auto 100px
	}

	.meBox:hover .meBox-Button a {
		width: 158px;
		height: 50px;
		margin-top: 13px
	}

	.meBox:hover .meBox-title p {
		font-size: 1.2rem
	}

	.meBox:hover .headPhoto {
		width: 8rem;
		height: 8rem;
		margin: -.5rem 0 0 -4rem;
		transform: rotate(360deg)
	}

	#cmdBox {
		float: none;
		margin: 0 auto 100px
	}
}

@media screen and (max-width:768px) {
	.meBox {
		width: 300px
	}

	.meBox:hover {
		width: 300px;
		height: 25rem;
		margin: 100px auto
	}

	.meBox-Button a:hover {
		color: #0084ff
	}

	.meBox:hover .meBox-Button a {
		width: 33.3%;
		margin-top: 13px
	}

	.meBox:hover .meBox-title p {
		font-size: 1.2rem
	}

	.meBox:hover .headPhoto {
		width: 8rem;
		height: 8rem;
		margin: -.5rem 0 0 -4rem;
		transform: rotate(360deg)
	}

	.meBox:hover .meBox-text {
		font-size: 1rem
	}

	.meBox-Button a {
		width: 33.3%;
	}

	#cmdBox {
		width: 100%;
		height: 850px
	}

	.cmd,
	.cmd:hover {
		width: 90%;
		margin: 0 auto
	}

	.cmd2 {
		position: relative;
		top: 20px;
		left: 0
	}

	.cmd:hover {
		box-shadow: 0 0 10px rgba(0, 0, 0, .4);
		z-index: 1
	}
}