:root {
  --side_bar_extendet: 300px;
  --icon_size: 50px;
  --menu_bar_height: var(--icon_size);
  --drop_down_extendet: 200px;
}
#spacer{
  height:var(--menu_bar_height);
  background-color:#ff0f50;
}
#menu_bar{
	background-color: #888;
	height: var(--menu_bar_height);
	width: 100%;
	top: 0px;
	position: fixed;
	display: flex;
	flex-flow: column wrap;
  overflow: hidden;
}
.skew_bg{
  position: fixed;
  top: 0px;
  width: 150px;
  height: 50px;
  transform: skewX(-20deg);
  background-color: #444;
  z-index: -1;
  box-shadow: 0px 0px 10px 0px #000;
}
.bar_ele{
  float: left;
  width: 150px;
  color: #fff;
  text-align: center;
  line-height:50px;
  font-family: Arial;
  font-size: 25px;
  text-decoration: none;
}
.bar_ele:hover > .skew_bg{
  background-color: #22a499;
}
.bar_ele_wrapp{
 /*i only need the div for centering*/
}
#hamburger{
  float: left;
  background-color:#444;
  display:block;
  width:var(--icon_size);
  height:var(--icon_size);
	background-image:url("./menu.png");
	background-size:var(--icon_size);
}
#hamburger:hover{
  background-color: #22a499;
	background-image:url("./menu2.png");
}
#hamburger_content{
  display: none;
  width: 300px;
  height: 100%;
  background-color: #444;
  position: fixed;
  top: var(--menu_bar_height);
}

.shadow{
	-webkit-box-shadow: inset 0px 0px 20px -8px rgba(0,0,0,0.75);
	-moz-box-shadow: inset 0px 0px 20px -8px rgba(0,0,0,0.75);
	box-shadow: inset 0px 0px 20px -8px rgba(0,0,0,0.75);
}