/************** navbar start ****************/
.nav-container{
	z-index: 2;
	display: flex;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	position: absolute;
	width: 100vw;
	background: linear-gradient(to bottom, rgba(21,21,21,.5), rgba(21,21,21,.35), rgba(21,21,21,.2),rgba(21,21,21,0));
}
@keyframes nav-container-fixed{
	0%{
		margin-top: -100%;;
	}
	100%{ margin-top: 0;}
}
.nav-fixed{
	position: fixed;
	background: rgba(21,21,21,1);
	animation-name: nav-container-fixed;
	animation-duration: .4s;
	animation-delay: 0s;
	color: #ffcc00;
	width: 100vw;
	z-index: 100;
}


.nav-logo{
	width: 19%;
	padding-left: 2em;
}
.nav-logo > .logo{
	width: 100%;
}


.nav-item:hover{
	font-weight: 600;
}
.nav-links{
	padding-right: 4em;
}
.nav-links > .nav-item{
	font-family: "Roboto", sans-serif;
	letter-spacing: 2px;
	font-size: 0.8rem;
	color: #ffcc00;
	padding: 1em;
}

.nav-fixed .nav-item{
	color: #ffcc00;
	letter-spacing: 2px;
	font-size: 0.8rem;
	transition: color linear 1s;
}

.footer{
	position: relative;
	display: flex;
	flex-direction: row;
	background-color: #263238;
}
.copyright{
	margin-top: 2em;
	align-self: flex-end;
	position: absolute;
	width: 100%;
	height: 40px;
	background-color: #37474F;
	color: #B0BEC5;
	text-align: center;
	line-height: 40px;
	font-size: 0.8rem;
}

@media only screen and (max-width: 750px) {
	.nav-container{
		flex-direction: column;
		padding-top: 3vw;
	}
	.nav-logo{
		padding-left: 0;
		align-self: center;
		margin-bottom: 15px;
		width: 50%;
	}
	.nav-links{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		padding-right: 0;
	}
	.nav-links .nav-item{
		padding: .6em 3vw;
		letter-spacing: 1px;
		font-size: 0.7em;
	}
}

/*navbar end*/