:root {

	--light-color: #FFF;
	--dark-color: #000;

	--button-hue: 140deg;

	--background: #f2f2f2;
  --text: #000000;
  --primary: #0000ff;

  --cover-bg: #000000;

  --image-border-radius: 0px;

  --padding-S: 0.5rem;
  --padding-M: 1rem;

  --font-small: 11px;

  --textmaxwidth-M: 650px;
  --textmaxwidth-L: 1200px;

  --sectionmargin-M: 200px;
}

* {
	box-sizing: border-box;
}

html {
	height: 100%;
	font-size: 16px;
}

body {
	min-height: 100vh;

	margin: 0 auto;
	padding: 0px;

	background-color: var(--background);
	font-family: 'AzeretMono-ExtraLight', Arial, sans-serif;
}

main { 
	padding: var(--padding-S); 
	margin-top: 109px;
	min-height: calc(100vh - 51px);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: normal;
	line-height: 120%;
	max-width: var(--textmaxwidth-L);
}

p {
	max-width: var(--textmaxwidth-L);
}

.link-button {
	font-size: 12px;
	background: transparent;
	padding: .5rem 1.5rem;
	border: 1px solid var(--text);
	margin-right: .5rem;
	text-decoration: none;
}

.link-button:hover {
	border: 1px solid var(--primary);
	cursor: pointer;
	text-decoration: underline;
}

small,
.small, 
figure > figcaption,
section h2 {
	font-size: var(--font-small);
	text-transform: uppercase;
}

a,
a:visited {
	color: var(--text);
}

a:hover {
	color: var(--primary);
}

b {
	font-weight: 600;
}

hr {
	margin: var(--padding-S) 0;
	border-bottom: none;
	border-top: 1px solid var(--text);
}

ul {
	list-style-type: none;
	padding: 0;
	margin: var(--padding-M) 0;
}

li {
  padding-left: 0px;
  padding-bottom: 1rem;
  text-indent: 0px;
}

li:before {
  content: "->";
  padding-right: 8px;
}

figure {
	margin: 4rem 0;
	min-width: 200px;
	max-width: 100%;
}

figure > img {
	border-radius: var(--image-border-radius);
	max-width: 100%;
	max-height: 80vh;
}

.tag {
	white-space: nowrap;
	border: 1px solid var(--text);
	border-radius: 16px;
	padding: 0px 8px 3px;
}

section {
	padding: 80px 0;
}

section, 
.has-border-bottom {
	border-bottom: 1px solid var(--text);
}

footer {
	padding: var(--padding-S); 
	padding-top: 0;
	display: flex;
  justify-content: space-between;
}

footer > * {
	display: table;
	background-color: var(--background);
	font-size: 11px;
}

nav {
	width: 100%;
	padding: var(--padding-S);
	position: fixed;
	top: 0;
	background: var(--background);
	border-bottom: 1px solid;
}

nav > * {
	margin: .5rem 0;
	max-width: 300px;
	display: table;
}

nav .home-link {
	margin-top: 0;
	text-transform: uppercase;
	font-size: 1.5rem;
	text-decoration: none;
}

nav .home-link:hover {
	color: var(--text);
}

dl {
	max-width: 400px;
}

dl dt, 
dl dd {
	display: inline-block;
	vertical-align: text-top;
	margin: .25rem 0;
}

dl dt {
	width: 50%;
}

dl dd {
	margin: 0;
	width: 50%;

	padding-left: 8px;
}

@media screen and (min-width: 1000px) {
	main, 
	footer { 
		padding: var(--padding-M);
		margin-left: 332px;
	}

	footer {
		padding-top: 0;
	}

	main {
		min-height: calc(100vh - 45px);
		margin-top: 0;
	}

	section {
		padding: var(--sectionmargin-M) 0;
	}

	nav {
		padding: var(--padding-M);
		width: unset;
    height: 100%;
    border-bottom: none;
	}

	nav .home-link {
		font-size: 2rem;
	}
}



/* LANDING */


/* LANDING / INTRODUCTION */

#landing .introduction {
	margin: 3rem 0;
	font-size: var(--font-small);
}

/* LANDING / PROJECTS */

.projects {
	padding-bottom: 0;
}

.projects .project {
	margin-bottom: 3rem;
}

.projects .project:last-child {
	border-bottom: 0;
}

.projects .project a {
	text-decoration: none;
}

.projects .project a:hover .tag {
	border: 1px solid var(--primary);
}

.projects .project .image-wrapper {
	height: 200px;
	background-color: var(--cover-bg);
	border-radius: var(--image-border-radius);

	/* centering cover image */
	display: flex;
	justify-content: center;
	align-items: center;

	overflow: hidden;

	margin-bottom: var(--padding-S);
}

.projects .project .image-wrapper img {
	height: 100%;
}

.projects .project .title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 1rem 0 .75rem;
}

.projects .project .title h3 {
	margin: 0;
	font-size: 1rem;
}

.projects .project .content p {
	margin: 0;
	font-size: var(--font-small);
	max-width: 600px;
}

.projects .project .meta {
	margin-bottom: .5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

@media screen and (min-width: 600px) {

	.projects .project {
		padding: var(--padding-S) 0;
		margin: 0;
		border-bottom: 1px solid var(--text);
	}

	.projects .project:first-child {
	  padding-top: 0;
	}

	.projects .project a {
		display: flex;
		flex-direction: row;
	}

	.projects .project .title {
		margin: var(--padding-M) 0;
	}

	.projects .project .image-wrapper {
		margin: 0;
		height: 100px;
		width: 200px;
	}

	.projects .project .wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding-left: var(--padding-M);
	}

	.projects .project .title {
		margin: 0;
	}

	.projects .project .meta {
		margin: 0;
		margin-left: 2rem;
	}

	.projects .project .meta > * {
		margin-left: 4rem;
	}

	.projects .project .meta > :first-child {
		margin-left: 0;
	}
}

@media screen and (min-width: 1000px) {

	.projects {
		margin-top: 0;
		padding-top: 0;
	}

	.projects .project {
		padding: var(--padding-M) 0;
	}
}

/* ABOUT */

.about .image-wrapper {
	margin: 4rem 0;
	text-align: center;
	align-content: center;
}

.about img {
	max-height: 240px;
}


@media screen and (min-width: 1000px) {
	.about {
		display: flex;
	}

	.about .text-wrapper,
	.about .image-wrapper {
		width: 50%;
		flex-grow: 1;
	}

	.about .text-wrapper {
		align-content: center;
		margin-right: 1rem;
	}

	.about .image-wrapper {
		margin: 0;
	}

	.about img {
		max-height: 40vw;
	}
}

/* SERVICES */

.services ul {
	max-width: var(--textmaxwidth);
}


/* PROJECT PAGE */

#project-page h1 {
	margin: 2rem 0 .75rem;
}

#project-page .meta {
	margin-bottom: 2rem;
}

#project-page .meta > * {
	margin-right: 1rem;
	line-height: 1.5rem;
}

#project-page h2, 
#project-page h3 {
	margin: 2rem 0 1rem;
}

#project-page h4 {
	font-size: var(--font-small);
}

#project-page .project-cover {
	background-color: var(--cover-bg);
	height: 80vw;
	max-height: 500px;

	display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;

	overflow: hidden;
}

#project-page .project-cover img {
		height: 100%;
		width: unset;
}

#project-page .project-text{
	min-height: 50vh;
}

@media screen and (min-width: 600px) {

	#project-page .project-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 1rem;
	}

	#project-page .project-text p {
		margin: 1rem 0;
	}

	#project-page h2, 
	#project-page h3 {
		margin: 2rem 0;
		text-decoration: underline;
	}
}

@media screen and (min-width: 1400px) {
	#project-page .project-cover {
		height: 50vw;
		max-height: 800px;
	}

	#project-page .project-grid {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-gap: 1rem;
	}
}

/* IMPRESSUM */

#impressum h1 {
	margin-top: 0;
}