/* 观看此视频之前可以看一下上个视频简介 接上个视频发的哈 */
* {
	/* 初始化 清除元素的内外边距 */
	padding: 0;
	margin: 0;
	/* 盒子模型 */
	box-sizing: border-box;
}
body {
	/* 宽度占浏览器可视区域的宽度 */
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #f2f2f2;

}
.navbar {
	/* 相对定位 */
	position: relative;
	width: 100%;
	height: 50px;
	line-height: 50px;
	background-color: #fff;
	/* 盒子阴影 */
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
	z-index: 10;
}
.navbar input {

	/* 绝对定位 */
	position: absolute;
	top: 5px;
	left: 20px;
	width: 40px;
	height: 40px;
	border-radius: 5px;
	box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.2),
		-18px -18px 30px rgba(255, 255, 255, 1);
	/* 加过渡 */
	transition: all 0.5s;

    -webkit-appearance: none;

    outline: none;

    display: flex;
    align-items: center;
    justify-content: center;
    user-select:none;
}
.navbar input:checked{
    left: 225px;
    box-shadow: 0 0 0 rgb(0 0 0 / 20%), 0 0 0 rgb(255 255 255 / 80%), inset 18px 18px 30px rgb(0 0 0 / 10%), inset -18px -18px 30px rgb(255 255 255);
}
.navbar input::after{
	font-family: "FontAwesome";
	content: "\f03b";
	color:#7a7a7a;
	font-size: 30px;
	transform: rotateY(180deg);
}
.navbar input:checked:after{
	font-size: 29px;
	color: #FFF;
}
.shadow{
	background-color: #FFF;
	width: 100%;
	height: 100%;
}
.navbar ul {
	position: absolute;
	top: 0;
	left: -200px;
	width: 200px;
	/* 高度占浏览器可视区域的高度 */
	height: 100vh;
	background-color: #20222a;
	transition: all 0.5s;
}
.navbar ul li {
	width: 100%;
	height: 70px;
	margin-bottom: 10px;
}
.navbar ul li:first-child {
	/* 弹性布局 让图片和文字垂直+水平居中于盒子内 */
	display: flex;
	justify-content: center;
	align-items: center;
	/* 改变了盒子的主轴方向 让两个元素垂直排列 */
	flex-direction: column;
	width: 100%;
	height: 150px;
	padding: 10px;
}
.navbar ul li:first-child img {
	width: 80px;
	border-radius: 50%;
}
.navbar ul li:first-child span {
	color: #fff;
	font-size: 14px;
	/* 禁止文字换行 */
	white-space: nowrap;
}
.navbar ul li a {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	color: #d2d2d2;
	/* 取消a标签的下划线 */
	text-decoration: none;
	/* 现在盒子内直接定义好左边框 不过颜色为透明色也就看不见 */
	border-left: 6px solid transparent;
}
.navbar ul li a i {
	font-size: 18px;
	margin: 0 15px;
}
.navbar ul li a span {
	font-size: 14px;
}
.navbar ul li a:hover {
	color: #fff;
	/* 这样文字和图标会被带跑不太好看 解决办法很简单 */
	/* 然后鼠标放上去变颜色就可以了 */
	border-left-color: #fb7299;
}
.navbar input:checked ~ ul {
	left: 0;
}