* {
	/* 页面初始化 清除元素的内外边距 */
	padding: 0;
	margin: 0;
}
body {
	/* 弹性布局 让元素在页面中垂直+水平居中 */
	display: flex;
	justify-content: center;
	align-items: center;
	/* 让页面占浏览器可视区域的高度 */
	height: 100vh;
	background-color: #00034b;
}
.container .ghost {
	/* 相对定位 */
	position: relative;
	width: 150px;
	height: 225px;
	/* 圆角属性 左上角和右上角为圆角 */
	border-radius: 75px 75px 0 0;
	background-color: #fff;
	/* 盒子阴影 inset是内阴影 啥都不加就是默认的外阴影(outset) */
	box-shadow: -17px 0 0 #dbdbdb inset, 0 0 50px #5939db;
	animation: ghost 2s infinite;
}
/* 眼睛 start */
.container .ghost .ghostEyes {
	/* 弹性布局 */
	display: flex;
	/* 让元素平均分配宽度 */
	justify-content: space-around;
	width: 90px;
	padding-top: 70px;
	margin: 0 auto;
}
/* 利用两个伪元素做出卡姿兰大眼睛 */
.container .ghost .ghostEyes::before,
.container .ghost .ghostEyes::after {
	content: "";
	width: 15px;
	height: 25px;
	border-radius: 50%;
	background-color: #00034b;
}
/* 眼睛 end */

/* 腮红 start  */
/* 逻辑跟眼睛一样 */
.container .ghost .ghostDimples {
	display: flex;
	justify-content: space-around;
	width: 130px;
	padding-top: 15px;
	margin: 0 auto;
}
.container .ghost .ghostDimples::before,
.container .ghost .ghostDimples::after {
	content: "";
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background-color: #ffbeff;
}
/* 腮红 end */

/* 脚 start  */
.container .ghost .ghostFeet {
	/* 这个主要是向让四只脚水平排列  */
	display: flex;
	/* 绝对定位 */
	position: absolute;
	bottom: -13px;
	width: 100%;
}
.container .ghost .ghostFeet .ghostFoot {
	width: 25%;
	height: 26px;
	border-radius: 50%;
	background-color: #fff;
}
/* 设置一下最后一个 让它跟身体的内阴影一样 */
.container .ghost .ghostFeet .ghostFoot:last-child {
	/* 利用背景渐变色实现 to right 是从做到右 */
	background-image: linear-gradient(to right, #fff 55%, #dbdbdb 45%);
}
/* 脚 end */

/* 阴影 start */
.container .shadow {
	width: 150px;
	height: 40px;
	margin-top: 50px;
	border-radius: 50%;
	background-color: #000232;
	/* 动画  名称 时长 infinite是无限次播放 */
	animation: shadow 2s infinite;
}
/* 阴影 end */
/* 然后制作漂浮的动画 */
@keyframes ghost {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		/* 2D位移 -15px 是向上走 */
		transform: translateY(-15px);
	}
}
@keyframes shadow {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		/* 缩放 .9比1小一点点 */
		transform: scale(0.9);
	}
}
li,#home {
        display: none;
}