/*=================================================================*/
/*===========================Navigation============================*/

/* Style the hamburger icon */
.hamburger {
	color: white;
	font-size: 22px;
}

/* Hide the hamburger and the little box (input field) from the label */
.hamburger, #menuicon {
	display: none;
}

/* Remove margins and padding from the list, and add a black background colour */
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
 }
 
 /* Set background of navigation */
nav{	background-color: #333;}

/* Float the list items side by side */
nav ul li {	float: left;}

/* Style the links inside the list items */
nav ul li a {
    display: inline-block; /* inline-block elements are like inline elements but they can have a width and a height */
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Change background colour of links on hover */
nav ul li a:hover {background-color: #111;}


/*=================================================================*/
/*=========================Mobile Styling==========================*/

/* Settings for screen is less than 680 pixels wide */
@media screen and (max-width:680px) {

	/* Hide the menu items */
	nav ul li {display: none;}

	/* Display the hamburger icon */
	.hamburger {
		display: block;
		padding: 0 20px;
		color: #FFF;
		font-size: 20px;
		line-height: 60px;
	}

	/* Set background hover colour when hovering over menu icon */
	.hamburger:hover { background-color: #000000; }

	/* Display the menu (list items) when icon is clicked */
	#menuicon:checked + ul li {display: block;}

	/* Set properties of list items */
	nav li {
		display: block;
		width: 100%;
		border-bottom: 1px ridge gray;
	}

	/* Set hover colour for list items */
	nav li:hover{ background-color: #111; }
}