html,
body {
	margin: 0;
	padding: 0;
}

:root {
	--palette-color-dark: #222831;
	--palette-color-dim: #393E46;
	--palette-color-muted: #948979;
	--palette-color-light: #DFD0B8;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	color: var(--palette-color-light);
	background-color: var(--palette-color-dark);
	width: 100%;
}

header {
	width: 100%;
	background-color: var(--palette-color-dim);
	text-align: center;
	display: fixed;
}

#sidebar {
	width: 200px;
	background-color: var(--palette-color-dim);
	position: fixed;
	top: 0;
	left: 0;
	padding-top: 6em;
	height: 100%;
	color: var(--palette-color-light);
	transition: width 0.3s ease-in-out;
	overflow-x: hidden;
	display: inline-block;
}

.sidebar-open {
	width: 200px !important;
}

.sidebar-open nav {
	display: block !important;
	white-space: nowrap;
}

.sidebar-button {
  display: inline-block;
  cursor: pointer;
  padding: 5px;
}

.bar1, .bar2, .bar3 {
  width: 30px;
  height: 4px;
  background-color: var(--palette-color-light);
  margin: 5px 0;
  transition: 0.4s;
}

/* Rotate first bar */
.sidebar-open .bar1 {
  transform: translate(0, 9px) rotate(-45deg);
}

/* Fade out the second bar */
.sidebar-open .bar2 {opacity: 0;}

/* Rotate last bar */
.sidebar-open .bar3 {
  transform: translate(0, -9px) rotate(45deg);
}

.sidebar-button {
	display: none;
}

#sidebar nav>ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#sidebar nav>ul>li a {
	display: block;
	padding: 1em;
	text-decoration: none;
	color: var(--palette-color-light);

}

#sidebar nav>ul>li a:hover {
	background-color: var(--palette-color-light);
	color: var(--palette-color-dark);
}

main {
	margin-left: 200px;
	padding: 1em;
	display: inline-block;
	width: calc(100% - 200px - 2em);
}

header h1 {
	margin: 0;
	padding: 1em;
}

@media only screen and (max-width: 600px) {
	#sidebar {
		width: 40px;
	}
	#sidebar nav {
		display: none;
	}

	main {
		margin-left: 40px;
		padding: 1em;
		display: inline-block;
		width: calc(100% - 5em);
	}

	.sidebar-button {
		display: inline-block;
	}
}