body {
	background: #f5f5f5;
	margin: 2rem;
}

/* ------- header ----------- */

header {
	display: flex;
	justify-content: space-between;
  	font-size: 1.2em;
  	font-family: "ApfelGrotezk-Regular", Arial, Helvetica, sans-serif;
  	padding-bottom: 1em;
	width: 100%;
	z-index: 1000;
	background-color: #f5f5f5;
}

.header-left {
	flex: 1;
	text-align: left;
}

.header-right {
	flex: 1;
	text-align: right;
}


/* ------- menue -------- */
.container_row {
	display: flex;
	overflow: hidden;
}

.container_column_left {
	flex: 1;
    overflow-y: auto;
    height: 85vh;
    box-sizing: border-box;
	font-family: 'Azeret Mono', monospace;
  	font-size: 2em;
  	padding-top: 3em;
}

.btn {
	padding-top: 0.7em;
	border: none;
  	outline: none;
  	background: none;
 	font-family: 'Azeret Mono', monospace;
  	font-size: 1em;
  	width: 100%;
  	text-align: left;
}

.btn:hover {
	cursor: pointer;
	text-decoration: underline;
}

/* ------- about -------- */
.about_text {
	font-family: 'Azeret Mono', monospace;
	font-size: 17px;
	line-height: 120%;
	max-width: 25em;
	padding-bottom: 3em;
}

/* ------- projects ------- */
.container_column_right {
	flex: 1.7;
    overflow-y: auto;
    height: 85vh;
    box-sizing: border-box;
	font-family: 'Azeret Mono', monospace;
  	font-size: 2em;
  	padding-top: 3em;
}


.filterDiv {
	padding-left: 15px;
	padding-top: 30px;
	padding-bottom: 30px;
	border-bottom: 2px solid black;
	display: none;
}

.show {
  display: block;
}

.project-link {
	text-decoration: none;
	color: black;
}

.project-link:hover {
	cursor: pointer;
}


/* ------- responsible design --------- */
@media screen and (max-width: 600px) {
	.header-left, .header-right {
		flex: none;
		width: 100%;
		text-align: center;
	}
}