/* Lets be responsive! */
/* All thanks to https://stackoverflow.com/a/63077669 */

/* Small screens */
@media screen and (max-width: 1000px) {
	.menubar-container {
		display: block;
		position: fixed;

		background-color: white;

		margin: 0px;
		border-bottom-right-radius: 15px;

		transform: translate(-100%,0);
		transition: transform 0.5s;
	}

	.menubar-togglebutton {
		position: absolute;
		margin-left: 200px;

		padding: 1px 4px 4px 5px;

		background-color: #7c9a50;
		border-bottom-right-radius: 15px;

		width: 30px;
		height: 30px;
		transform: none;
		transition: transform 0.5s;

	}

	.menubar-container:hover .menubar-togglebutton {
		transform: translate(0%, -150%);
	}

	.menubar-container:hover {
		transform: none;
	}

	.menubar-container .menubar-logo {
		width: 100%;
		height: 70px;
		background-position: center top;
	}

	.menubar-container ul {
		
		padding: 0px;
		padding-top: 5px;

		width: 200px;

		margin: 0px;
		padding-bottom: 5px;

	}

	.menubar-container li {
		list-style: none;
		text-align: center;
		
		padding: 10px 0px 10px 0px;
	}

	.menubar-container a {
		text-decoration: none;
		color: black;
	}
	.menubar-container a:hover {
		color: burgandy;
	}
}

/* Large screens */
@media screen and (min-width: 1001px) {
	/* the nav element that contains everything else */
	.menubar-container {
		display: flex;
		width: 100%;
		height: min-content;

		background: #FFFFFF;
		color: #7a9a4e;
		font: 20px/20px sans-serif;

		/* Flex */
		/*display: flex;*/
		flex-flow: row wrap;
		justify-content: center;
	}

	.menubar-togglebutton {
		display: none; /* This is a mobile only element */
	}

	/* Just the logo */
	.menubar-logo {
		display: flex;
		width: 100px;
		padding-right: 300px;
	}

	/* Contains all the links*/
	.menubar-container ul {
		display: flex;
		flex-flow: row;
		align-items: flex-end;
		gap: 16px;

		margin: 0;
	
		list-style: none;
	}

	/* Each list element - acts as a container for the <a> */
	.menubar-container * li {
		margin: 0;
		padding: 0;
		position: relative;
		justify-content: center;

		height: 100%;
	}

	/* The actual link itself */
	.menubar-container a {
		color: inherit;
		font: inherit;

		display: block;
		padding: 30px 25px;

		text-align: center;
		text-decoration: none;

		transition: all .25s ease;
	}

	.menubar-submenu {
		
	}

	.menubar-submenu div {
		display: none;
		position: absolute;
		background: white;

		/* cute rounding time */
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
	}

	.menubar-submenu:hover div {
		display: block;
	}
}

/* 
 *		The same for everyone !
 * */

.menubar-container li:hover a {
	color: #682f04;
}

.menubar-container .menubar-logo {
	background-size: contain;
	background-repeat: no-repeat;
}