/*styles the header*/
/*sets the background color of head to blackish color*/
header{
	background-color: #262626;

}
/*styles list items*/
/*list-style: none gets rid of defaut bullet points*/
li{
	list-style: none;
}
/*styles the anchor links*/
/*sets the color of menu items to white*/
/*text-decoration removes any text decoration such as underline*/
a{
	color: white;
	text-decoration: none;
}
/*styles the navigation tag*/
/*min hight set to 70pixels high*/
/*display in a flexible layout*/
/*align-items centers items horizontally*/
/*padding adds 60pixels left and right between element and border*/
.navbar{
	min-height: 70px;
	display: flex;
	align-items: center;
	padding: 0 60px;
}
/*styles the header element*/
/*position puts element on top of screen while scrolling*/
/*top puts element on the top of screen*/
.header-sticky{
	position: sticky;
    top: 0;
    z-index: 10;
}

/*styles unordered  list element*/
/*displays content in flexible container side by side*/
/*margin-left pushes items all the way to the right*/
/*gap puts 60pixel spacing between list items*/
.nav-menu{
	display: flex;
	margin-left: auto;
	gap: 60px;
}

/*styles menu items when hovered*/
/*sets color of hovered items to dodgerblue*/
/*tansition gives a slower transition to highlight element*/
.nav-link:hover{
	color: dodgerblue;
	transition: 0.7s ease;

}
/*styles the hamburger menu*/
/*Display none hides the menu for bigger screens*/
/*cursor pointer changes the appearence of mouse cursor to hand when hovered over*/
.hamburger{
	display: none;
	cursor: pointer;
}
.bar{
	display: block;
	width: 25px;
	height: 3px;
	margin: 5px auto;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease-in-out;
	background-color: white;
}
/*@media is a media query that sets a max width of 768 pixel*/
/*styles the 4 span elements into a hamburger menu*/
/*position remove html form normal document flow*/
/*right: position hamburger 20px from right edge */
/*displa*/
@media(max-width: 768px){
	.hamburger{
		display: block;
		position: absolute;
		right: 20px;
	}
	/*styles the active toggle for the 1st span element in bar*/
	/*translate move 1st span element 8pixels to the left and rotates it by 45 degrees counter clockwise*/
	.hamburger.active .bar:nth-child(1){
		transform: translateX(-8px) rotate(-45deg);
	}
	/*styles the unordered list, nav menu*/
	/*position takes element out of normal document flow*/
	/*left -150% takes drop down menu off screen*/
	/*top position element 70pixels from top of screen*/
	/*gap 0 puts 0 spacing between elements*/
	/*flex direction column puts elements into a column*/
	/*background color sets to a blackish color*/
	/*width 100% lets element take up full width of screen*/
	/*test align center centers elements vertically*/
	/*transition moves nav menu at 0.3s to put on and off screen*/
	.nav-menu{
		position: absolute;
		left: -150%;
		top: 70px;
		gap:0;
		flex-direction: column;
		background-color: #262626;
		width: 100%;
		text-align: center;
		transition: 0.3s;
	}
	/*styles list items*/
	/*margin puts 16pixels margin top and bottom between list items*/
	.nav-item{
		margin: 16px 0;
	}
	/*styles nav menu when active*/
	/*left puts nav menu on screen when active*/
	.nav-menu.active{
		left: 0;
	}
	

}