@charset "utf-8";
/* CSS Document */

#menu-bar{
    display:none;
}

header label{
	float:right;
	font-size:80px;
	margin:0px;
	cursor:pointer;
}

.menu{
	position:absolute;
	top:80px;
	left:0;
	width:100%;
	height:100vh;
	background:rgba(51,51,51,0.9);
	transition:all 0.5s;
	transform:translateX(-100%);
	font-size:50px;
}

.menu a{
	display:block;
	color:#fff;
	height:90px;
	text-decoration:none;
	padding:15px;
	border-bottom:1px solid rgba(255,255,255,0.5);
}

.menu a:hover{
	background:rgba(255,255,255,0.3);
}

#menu-bar:checked ~ .menu{
	transform:translateX(0%);
}

@media (min-width:1024px){
	.menu{
		position:static;
		width:auto;
		height:auto;
		transform:translateX(0%);
		float:right;
		display:flex;
		font-size:15px;
	}
	
	.menu a{
		border:none;
	}
	
	header label{
		display:none;
	}
}