.settings{
	position:fixed;
	top:8%;
	padding:6px 12px;
	transition:transform 0.3s linear;
	transform:translateY(-20%);
	background:#FAE6BE;
	cursor:pointer;
	border-radius:18px;
	z-index:3;

}

.settings img{
	width:30px;
	height:30px;
	border-radius:8px;
}

.settings:hover{
	background:red;
}

#settings{
	transition:transform 0.3s linear;
}

.navbar{
	position:fixed;
	top:50%;
	transform:translateY(-50%);
	overflow:hidden;
	height:0px;
	z-index:3;
}

.navbar >nav{
	flex:1;
	text-align:center;
}
.navbar >nav >ul{
	list-style-type:none;
	display:block;
}
.navbar >nav >ul>li{
	display:block;
	font-weight:bold;
	margin:12% auto;
}

.navbar >nav >ul>li>a{
	position:relative;
	text-decoration:none;
	cursor:pointer;
	border:none;
	transition: background 0.2s  linear 0.1s, color 0.2s  linear 0.1s;
	text-align:center;
	transition: background 0.3s linear 0.1s, color 0.3s linear 0.1s, font-weight 0.3s linear 0.1s;
	padding:8px 24px;
	box-shadow:0px 0px 9px 1px red;
	border-radius:12px;
	cursor:pointer;
	font-weight:600;
	background:#FAE6BE;
	color:red;
	
}
.navbar >nav >ul>li>a:hover{
	background: red;
	color: #FAE6BE;
}

.navbar >nav >ul>li a span{
	position:relative;
	padding:0px;
}

.navbar >nav >ul>li a span img{
	position:relative;
	top:8px;
	width:30px;
	height:30px;
	
}

@media only screen and (max-width:470px){
	.settings{
		position:fixed;
		top:85vh;
		left:5%;
		z-index:3;
	}
	.navbar{
		position:fixed;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%);
		width:100%;
		overflow:hidden;
		height:0px;
		z-index:3;
	}
	
	/* .navbar >nav >ul,li{
		display:block;
	} */
}