body {
	background-color: #ffffff;
	font-family: plus jakarta sans;
	color: black;
}

p.name{
	text-align: right;
	padding-right: 2%;
	padding-bottom: 10vh;
}

img {
	width: 100%;
	height: auto;
}

nav ul{
	list-style-type:none;
	color: black;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-right: 5vh;
}

nav.landing{
	justify-content: center;
	padding-top: 45vh;
	padding-bottom: 40vh;
}

li{
	color: black;
	border: 1px solid black;
	border-radius: 20px;
	padding-top: 5px;
	padding-bottom: 7px;
	padding-left: 10px;
	padding-right: 10px;
	width: 60px;
	text-align: center;
}

a:link{
	color: inherit;
	text-decoration: none;
}

a:visited{
	color: inherit;
}

a:hover{
	color: rgb(0, 255, 42);
}

h2{
	font-size: 200px;
	font-weight: 500;
	border-top: 2px solid black;
	/*margin-bottom: -15vh;*/
	margin-bottom: -145px;
}

/*about*/

section.about{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	gap: 10px
}

section.about figure{
	grid-column: 2 / span 3;

}

section.about p{
	align-self: end;
}

/*work*/

article > div {
    display: none;
    /* damit keine Höhe */
    grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s;
}

article > div.sichtbar {
    display: block;
}


/*shift*/

section.eins{
	margin-top: 220px;
}

figure#shift{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 15px;
	margin-left: 5%;
	margin-right: 5%;
}

figure#shift img{
	grid-column: span 1;
}

div.eins{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 15px;
	margin-left: 5%;
	margin-right: 5%;
}

div.eins figcaption{
	grid-column: 1 / 2;
}



/*BalancoOfPower*/

figure.cover{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 40px;
	padding-left: 15%;
	padding-right: 15%;
	padding-bottom: 20vh;
	margin-top: 20vh;
}

.cover img{
	grid-column: span 3;
}

/*figcaption.cover{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 10px;
	padding-left: 15%;
	padding-right: 15%;
	padding-bottom: 20vh;
}*/

figcaption.cover p{
	grid-column: 3 / 4 ;
}

figure.scans{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 10px;
	padding-left: 15%;
	padding-right: 15%;
}

/*TicTac*/

section.tictac{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	padding-left: 10%;
	padding-right: 10%;
	margin-top: 20vh;
}

figure.type{
	grid-column: span 5;

}

figure.number{
	grid-column: 2 / span 3;
	padding-bottom: 20%;
}

section.tictac p{
	grid-column: 1;
}

section.tictac figcaption{
	grid-row: 7;
}

/*Mittagsdämonen*/

section.vier{
	margin-top: 220px;
}

figure#mittagsdaemonen{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 15px;
	margin-left: 5%;
	margin-right: 5%;
}

figure#mittagsdaemonen img{
	grid-column: span 1;
}

div.vier{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 15px;
	margin-left: 5%;
	margin-right: 5%;
}

div.vier figcaption{
	grid-column: 1 / 2;
}


/*Glück?*/

section.funf{
	margin-top: 220px;
}

figure#gluck{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
	margin-left: 5%;
	margin-right: 5%;
}

figure#gluck img.gros{
	grid-column: 1 / 3;
}

figure#gluck img{
	grid-column: span 1;
}

div.funf {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 15px;
	margin-left: 5%;
	margin-right: 5%;
}

div.funf figcaption{
	grid-column: 1 / 2;
}





/*contact*/

  section.contact{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	padding-left: 2%;
	padding-bottom: 17vh;
	border-bottom: 2px solid black;
  }

  section.contact p.left{
	grid-column: 1 / 2;
  }

  section.contact p.right{
	grid-column: 6;
  }

  p.cont{
	padding-top: 65vh;
	padding-bottom: 10vh;
	padding-left: 2%;
	border-bottom: 2px solid black;
  }

  section.homework {
	padding-top: 3vh;
	padding-left: 2%;
	padding-bottom: 5vh;
  }

  article > h2 {
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
        opacity: 0.5;
    }
}