* {
	box-sizing: border-box;
	text-decoration: none;
}
/* REMOVE ALL MARGIN AND PADDING FROM THE BODY */
body {
	margin: 0;
	padding: 0;
}

/* STARTING STYLING FOR DESKTOP */

/* THE NAVBAR */
.navbar {
	/* we use flexbox to display these objects because we're going to want to divide them side by side */
	display: flex;
	/* Justify the contents with space between. This will push them away from each other */
	justify-content: space-between;
	/* We align our items in the center since our links gonna be smaller they will allign perfectly in the center of the brand name */
	align-items: center;
	/* We give the navbar a dark background color */
	background-color: #333;
	/* we make all the text inside of the navbar white by default */
	color: white;
}

/* THE BRAND TITLE STYLES */
.brand-title {
	/* Increase the font size to make it a littlr bigger */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.5rem;
	/* Give it a margin so it is not to close to the edge */
	margin: .5rem;
}

/* THE NAV BAR LINKS. NAV BAR LINKS UL, LI AND LI's ANCHOR TAGS */
.navbar-links {
	/* Remove all standard stylings from it */
	margin: 0;
	padding: o;
}
.navbar-links ul {
	/* Do the same for the navbar links ul. Remove all standard stylings from it */
	margin: 0;
	padding: o;
	/* We make it display as flex so that we can easily align items inside of out list side by side and space them out properly */
	display: flex;
}
.navbar-links li {
	/* Remove the list items from the cause you don't want the dots to show */
	list-style: none;
}
.navbar-links li a {
	font-family: Arial, Helvetica, sans-serif;
	color: white;
	/* To keep them appart from each other we give them a little padding of 1rem */
	padding: 1rem;
	/* We make them display block. This will create a block around each text equal the height of the container in this case the li and the li in this case has the height of the nav bar. This design acomodates the next idea */
	display: block;
}
/*.navbar-links li:hover {
	//This code adds animation to the navbar-links li blocks, it will change the background color when hover over them
	//It is disabled because it will apply to all navbar-links li. That would cause the form as well to change bg color since it is inside an li
	//but you don't want that.
	We add the animation to individual li instead via their class
}*/

.navbar-links .navbarLinksHomeLi:hover {
	background-color: #555;
}
.navbar-links .navbarLinksShoppingLi:hover {
	background-color: #555;
}
.navbar-links .navbarLinksAboutLi:hover {
	background-color: #555;
}
.navbar-links .navbarLinksContactLi:hover {
	background-color: #555;
}

/* FORM STYLES */
.formDiv {
	bborder: 1px solid orange;
	width: 90%;
	margin: 0;
	padding: 0;
	margin-top: 4%;
}
.formElem {
	bborder: 1px solid yellow;
	padding: 0;
}
.formElem ul {
	bborder: 1px solid blue;
	width: 100%;
	margin: 0;
	padding: 0;
	display: flex;
}
.formElem ul li {
	bborder: 1px solid green;
	width: 33%; /* 33.3% of the ul element */
	padding-left: .3rem; /* space between the form li elements */
}
.formElem ul li input {
	bborder: 1px solid orange;
	list-style: none;
	display: flex;
	border-radius: .2rem;
}
.formElemInpUSR {
	width: 99%; /* %ge of its li container */
	outline: none; /* remove the blue focus outline around the input element */
}
.formElemInpPWD {
	width: 99%; /* %ge of its li container */
	outline: none; /* remove the blue focus outline around the input element */
}
.formElemBtnLOG {
	width: 100%;
	font-weight: 800;
}
/* THE MOBILE HAMBURGER TOGGLE BUTTON */
.toggle-button {
	position: absolute;
	top: .7rem;
	right: 1rem;
	/* To make sure the hamburger does not show by default so it does not display on larger screens */
	display: none;
	/* Change the flex direction to be column so that the spans end up on top of each other */
	flex-direction: column;
	justify-content: space-between;
	width: 30px;
	height: 21px;
}

.toggle-button .bar { /* THIS WILL DISPLAY THE HAMBURGER 3 SPANS LIKE 3 BARS ON TOP OF EACH OTHER */
	height: 3px;
	width: 100%;
	background-color: white;
	border-radius: 10px;
}

@media (max-width: 599px) {
	.toggle-button {
		display: flex;
	}
	.navbar-links {
		display: none;
	}

	.navbar {
		/* Make all navbar elements display on top of each other, that way when click on the burger, the links will show under the brand name. But this will automatically place them in the center including the brand name */
		flex-direction: column;
		/* To make them piled up on the left */
		align-items: flex-start;
	}
	.navbar-links ul {
		flex-direction: column;
	}
	.navbar-links li a {
		/* Reduce the large space between the links */
		padding: .5rem 1rem;
	}
	.formElem li {
		/* Put some space between the li list input elements inside the form */
		margin: 3px;
	}
	.navbar-links.active {
		/* We use an active class to determine if the links should be showing by default or to click on it for it to show. now since we did set navbar-links display to none earlier, we know they will not be displayed. Therefore now we need an action to activate them to show. That action will be a click action. The click action will be implemented using JavaScript */
		display: flex;
	}
	.formElem ul li {
		bborder: 1px solid green;
		width: 100%; /* 33.3% of the ul element */
	}
}