body {
	background: #01090b;
	color: #555;

	margin: 0;

	line-height: 34px;
}

* {
	box-sizing: border-box;
}

/***HEADER***/
h1 {
	margin-top: 0;
}

h1 a {
	color: whitesmoke;
	text-decoration: none;
}

h1 a:hover {
	transition-duration: .5s;
	border-bottom: 1px solid whitesmoke;
}

.hero {
	background-image: url("/images/binary-cat.gif");
	background-position: 120% 60%;

	background-color: #01090b;
	color: #eee;
	text-shadow: 0 0 5px #000;

	font-family: "Source Code Pro", monospace;
	text-align: center;

	padding: 1.25rem 0;
	border-bottom: 5px solid #33bb33;
}

/***NAVIGATION***/
/***MENU***/
.main-nav-bar ul {
	display: none; /*flex when displayed*/
	flex-direction: column;
	justify-content: space-around;

	position: absolute;

	text-align: left;

	background-color: #33bb33;

	list-style-type: none;

	padding: 1rem;

	z-index: 8;
}

.main-nav-bar ul li {
	margin-left: 0;
	border-bottom: 1px solid #eee;
}

.main-nav-bar ul a {
	color: #eee;
	text-decoration: none;
}

.nav-menu {
	position: absolute;

	top: 2rem;
	right: .5rem;
}

.main-nav-bar ul.sub-menu {
	display: grid;
	gap: 0;

	padding: 1rem;
}


/**SUB MENU**/
.nav-menu ul.hide-menu {
	display: none;
}

/*MENU HAMBURGER*/
.mobile-menu {
	display: flex;
	justify-content: center;
	position: absolute;
	font-size: 1.5em;
	color: #eee;

	background-color: #33bb33;

	width: 50px;

	top: 5px;
	right: 5px;

	border-radius: 4px;
	padding: .5rem;

	cursor: pointer;
}

/***MOBILITY***/
@media screen and (min-width: 768px) {
	/**HEADER**/
	header .hero {
		padding-bottom: 0;
		border-bottom: 0;
	}
	/**MENU**/
	.mobile-menu {
		display: none;
	}

	.main-nav-bar ul {
		display: flex;
		flex-direction: row;
		justify-content: center;
		gap: 2rem;

		padding: 0 1rem;
	}

	nav.main-nav-bar ul li {
		border-bottom: 0;
	}
	
	.main-nav-bar ul a {
		text-decoration: none;
	}
	
	.main-nav-bar ul.nav-menu {
		position: relative;
		display: flex;
		flex-direction: row;
	
		top: 0;
		right: 0px;
		width: 100%;
		margin: 0;
		border-bottom: 0;
		border-bottom: 0;
		padding: .5rem 1rem;
	}
	
}

@media screen and (min-width: 1200px){
	/**MENU**/
	.main-nav-bar ul {
		justify-content: center;
		gap: 2rem;
	}
}