@import url('./colorschemes/gruvbox.css'); /* Include colorscheme */

/* Globals  */
html, body {
  margin: 0;
  padding: 0;
}

body{
  font-size: 100%;
  line-height: 1.5;
 	background-color: var(--bg);
 	color: var(--fg);
}

a{
  text-decoration: none;
 	color: var(--acc-1);
}


/* Main Body */

.content {
  margin: 5em 5% auto 5%;
}
	
/* Navigation Menu */
.header { 
	width: 100%;
	background-color: var(--alt-bg);
	box-shadow:  inset 0 -20px 20px -20px var(--shadow);
	position: fixed;
	top: 0;


}

.hamburger {
	display: none;
}

.menu-entries a:hover{
	background-color: var(--acc-1);
	color: var(--alt-bg);
	transition: 400ms;
	box-shadow:  inset 0 -20px 20px -20px var(--shadow);

}

.menu {
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu-entries {
	float: right;
}

.menu-btn {
  display: none;
}

.menu a {
	display: inline-block;
	padding: 20px;
}


/* Footer */
footer {
	/* position: fixed; */

	width: 100%;
	text-align: center;
	padding-bottom: 14px;

}

@media screen and (max-width: 755px) {
/* Mobile layout - logo now serves as toggle for rest of menu items */

.logo {
	pointer-events: none;
}

.menu-icon {
	cursor: pointer;
 }

.menu-entries {
	text-align: center;
	float: none;
	display: none;
}
	
a.logo {
	display: block;
}

	.menu-btn:checked ~ 
		.menu li .menu-entries,
		.menu li .menu-entries a{
			display: block;
	}

	.menu-btn:checked ~ .menu .logo, .menu-entries a:hover {
	background-color: var(--acc-1);
	color: var(--alt-bg);
	transition: 400ms;
	}







.hamburger {
  display: block;
	float: right;
	position: absolute;
	top: 0;
	right: 0;

	margin-top: 12px;
	margin-right: 12px;
  cursor: pointer;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
	background-color: var(--acc-1);
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
	background-color: var(--alt-bg);
  transform: translate(0, 11px) rotate(-45deg);
}

.change .bar2 {
	opacity: 0;
}

.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
	background-color: var(--alt-bg);

}












}

@media screen and (min-width: 1040px) {
/* Wide window - links on a left sidebar */	
	.header {
		width: 15%;
		height: 100%;
		box-shadow: inset -22px 0 20px -20px var(--shadow);
	}

	.menu a {
		display: block;
	}

	.menu-entries{ 
		float: none;
	}

	.content { 
		margin: auto 5% auto 20%;
		padding: 1px 16px;
	}

	.menu-entries a:hover{
		box-shadow: inset -22px 0 20px -20px var(--shadow);
	}
}