:root {
  --randFarbe: #912421;
  --hintergrund: #191919;
  --schrift: #FAF9F9;
}

	/*--------------------GRUNDGERUEST---------------------------*/

	html{
		font-family: 'Exo 2', sans-serif;
		cursor: vertical-text;
		color:var(--schrift);
	}

	section{
		background-color:var(--hintergrund);
	}

	a{
		color:var(--schrift);
	}

	/*--------------------HEADER---------------------------*/

	#header{
		width:100%;
		height:50px;
		background:var(--randFarbe);
		position:fixed;
		left:0;
		top:0;
		z-index:3;
	}
	
		.headline{
			border-bottom:double var(--randFarbe);
			text-align:center;
			margin-top:10px;
			font-size:35px;
		}
		
		.liste{
			margin-left:10px;
			margin-top:10px;
			font-size:25px;
		}

			.liste a{
				color:var(--schrift);
				text-decoration: none;
			}

			.liste a:hover{
				text-decoration: underline;
				text-decoration-color:var(--randFarbe);
			}

		.punkt{
			display: inline-block;
			height:50px;
			line-height:50px;
			float:left;
			width:120px;
			text-decoration:none;
			color:#FAF9F9;
			transition: height 1s, width 1s, line-height 1s, background-color 1s, color 1s, font-size 1s;
		}


		.menu a:hover{
			color:#191919;
			background-color:#FAF9F9 !important;
			border-bottom:solid 1px;
			height:100px;
			width:170px;
			font-size:40px;
			line-height:100px;
		}
		
		#home{
			height:100vh;
		}
		
		.header-content{
			top:0;
			position:absolute;
		}

		.nik1{
			font-size:135px;
		}

		.loch1{
			font-size:100px;
		}

		.nik1{
			font-size:15vh;
		}

		.loch1{
			font-size:10vh;
		}

		.nik2{
			font-size:13vh;
		}

		.loch2{
			font-size:8vh;
		}
		
	/*--------------------MAIN---------------------------*/

	#main{
		width:100%;
		background:var(--hintergrund);
		position:absolute;
		left:0;
		height: auto;
		padding-bottom:75px;
	}
	
		#projekte{
			padding-top:30px;
			padding-bottom:30px;
		}
			#allBoxen{
				display:                 flex;
				display:                 -webkit-flex; /* Safari 8 */
				flex-wrap:               wrap;
				-webkit-flex-wrap:       wrap;         /* Safari 8 */
				justify-content:         center;
				-webkit-justify-content: center;       /* Safari 8 */
			}

				#boxen{
					width:20%;
					min-width:350px;
					border-style: double;
					height:auto;
					min-height:500px;
					float:left;
					margin-top:30px;
					text-align:center;
					margin:10px;
					padding-bottom:30px;
				}
				
	/*--------------------FOOTER---------------------------*/

	#footer{
		width:100%;
		height:50px;
		background:var(--randFarbe);
		color:#FAF9F9;
		position:fixed;
		left:0;
		bottom:0;
		text-align:center;
		line-height:50px;
		z-index:2;
	}
	
		#kontakt{
			padding-top:30px;
			text-align:center;
			font-size:25px;
		}

		.fly{
			width:300px;
			height:300px;
		}

		#impress{
			color:#FAF9F9;
		}

		#daten{
			color:#FAF9F9;
		}
		
		#social{
			width:100px;
			cursor:pointer;
			font-size:40px;
		}

		.fa-twitter, .fa-instagram{
		  background:var(--hintergrund);
		  color:var(--schrift);
		  text-decoration:none;
		}

		.fa:hover {
			opacity: 0.7;
		}
	
	/*--------------------OTHER---------------------------*/

	div::selection{
		background-color:#ffcc02;
	}
	a::selection{
		background-color:#ffcc02;
	}

	.style-seven {
		overflow: visible; /* For IE */
		height: 30px;
		border-style: solid;
		border-color:var(--schrift);
		border-width: 1px 0 0 0;
		border-radius: 20px;
		width:50vw;
	}
	.style-seven:before { /* Not really supposed to work, but does */
		display: block;
		content: "";
		height: 30px;
		margin-top: -31px;
		border-style: solid;
		border-color:var(--schrift);
		border-width: 0 0 1px 0;
		border-radius: 20px;
	}

	.fadingLine{
		border: 0; 
		height: 1px; 
		background-image: linear-gradient(to right, var(--hintergrund), var(--schrift), var(--hintergrund));
	}
	
	.bottomBorder{
		border-bottom:solid var(--randFarbe) 5px;
	}

	.topBorder{
		border-top:solid var(--randFarbe) 5px;
	}
	
	



	.parallax {
		min-height:90px; 
		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}


	/*--------------------SCROLLBAR---------------------------*/

	/* width */
	::-webkit-scrollbar {
	  width: 10px;
	}

	::-webkit-scrollbar-button{
		height:50px;
		background:var(--randFarbe);
	}

	/* Track */
	::-webkit-scrollbar-track {
	  background: var(--hintergrund); 
	}

	/* Track */
	::-webkit-scrollbar-track:hover {
	  background: var(--randFarbe); 
	}
	 
	/* Handle */
	::-webkit-scrollbar-thumb {
	  background: var(--randFarbe); 
	}

	/* Handle on hover */
	::-webkit-scrollbar-thumb:hover {
	  background: var(--hintergrund); 
	}



/***************************MOBILE**********************************/

@media screen and (max-device-width: 480px){
	
	.headline{
		text-align:center;
		margin-top:10px;
		font-size:80px;
	}
	
		.liste{
			margin-left:10px;
			margin-top:10px;
			font-size:60px;
		}
		

	.menu{
		visibility:hidden;
	}
	
	
    #home{
		height:100vh;
		padding-bottom:0;
	}
	
	#boxen{
		width:80vw;
		min-width:350px;
		border-style: double;
		height:auto;
		min-height:90vw;
		float:left;
		margin-top:30px;
		text-align:center;
		margin:10px;
	}
	
	#projekte{
		padding-top:0;
	}
	
	#footer{
		height:100px;
		line-height:100px;
	}
	
		#kontakt{
			padding-top:100px;
			padding-bottom:150px;
			text-align:center;
			font-size:55px;
		}
	
		#impress{
			color:var(--schrift);
			font-size:50px;
		}

		#daten{
			color:var(--schrift);
			font-size:50px;
		}
	
	.style-seven {
		overflow: visible; /* For IE */
		height: 30px;
		border-style: solid;
		border-color: var(--hintergrund);
		border-width: 1px 0 0 0;
		border-radius: 20px;
		width:90vw;
	}
	
	.fly{
		width:80vw;
		height:80vw;
	}
}