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

/* Remove the input field from the label */
.icon, [id^=drop] {
 display: none;
}

/* Remove margins and padding from the list, and add a black background colour */
ul.topnav {
    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 */
ul.topnav li {	float: left;}

/* Style the links inside the list items */
ul.topnav 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 color of links on hover */
ul.topnav li a:hover {background-color: #111;}

/* Hide the menu icon item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}

/* Settings for screen is less than 680 pixels wide */
@media screen and (max-width:680px) {
	/* Hide the menu items */
	ul.topnav li {display: none;}

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

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

	/* Display dropdown menu (list items) when clicked */
	[id^=drop]:checked + ul.topnav 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; }
}