@import url(./style.css);

#header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 8rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	/* background: linear-gradient(to right, #111, #123, #111); */
	padding: 1.5rem 5%;
	z-index: 100;
}
.header.scrolled{
	background: linear-gradient(to right, #111, #123, #111);
}
#header .logo{
	display: flex;
	align-items: center;
}
#header .logo img{
	width: 5rem;
	margin-right: .5rem;
}
#header .title{
	font-family: var(--font3);
	font-size: 2.5rem;
	font-weight: 700;
}
#header a{
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--color1);
	transition: .3s ease-in;
}
#header .nav-link:hover, #header .nav-menu .curr{
	color: var(--color3);
}

#header .navbar .nav-menu{
	display: flex;
	gap: 5rem;
}

/* BURGER */
.burger{
    display: none;
    cursor: pointer;
}
.bar{
    display: block;
    width: 2.5rem;
    height: .3rem;
    margin: .5rem auto;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    background-color: var(--color1);
}