@font-face{
	font-family: "Futura";
	src: url("fonts/Futura.ttf");
}
@font-face {
  font-family: "Bold";
  src:url("fonts/HelveticaNeueBlackExt.otf");
}
@font-face{
	font-family: "Italic";
	src: url("fonts/Futura_I.ttf");
}
@font-face{
	font-family: "BoldItalic";
	src: url("fonts/Futura_B_I.ttf");
}
@font-face{
	font-family: "Light";
	src: url("fonts/Futura_L.ttf");
}
@font-face{
	font-family: "LightItalic";
	src: url("fonts/Futura_L_I.ttf");
}

@font-face{
	font-family: "SFUltraLight";
	src: url("fonts/SF-Pro-Display-Ultralight.otf");
}

@font-face{
	font-family: "NYRegItalic";
	src: url("fonts/NewYorkExtraLarge-RegularItalic.otf");
}

@font-face{
	font-family: "NYReg";
	src: url("fonts/NewYorkExtraLarge-Regular.otf");
}

@font-face{
	font-family: "NYBlackItalic";
	src: url("fonts/NewYorkExtraLarge-Black.otf");
}

@font-face{
	font-family: "NY";
	src: url("fonts/NewYork.otf");
}

@font-face{
	font-family: "NYBoldItalic";
	src: url("fonts/NewYorkExtraLarge-BoldItalic.otf");
}

@font-face{
	font-family: "SF";
	src: url("fonts/SF-Pro-Display-Regular.otf");
}

@font-face{
	font-family: "Helvetica";
	src: url("fonts/HelveticaNeueRoman.otf");
}

@font-face{
	font-family: "HelveticaLight";
	src: url("fonts/HelveticaNeueLight.ttf");
}

:root {
	--dark: #202020;
  --light: #ffffff;
	--theme: #b8a7ea;

}

/* COMMENTING THIS OUT TO FORCE DARK THEME

@media (prefers-color-scheme: dark){
:root {
  --dark: #202020;
  --light: #ffffff;
	--theme: #b8a7ea;

}
}

@media (prefers-color-scheme: light){
	:root {
	  --dark: #b8a7ea;
	  --light: #202020;
		--theme: #ffffff;
	}
}
*/

::selection {background: var(--theme); color: var(--dark);}
::-moz-selection {background: var(--theme); color: var(--dark);}

*{
	margin:0;
	padding:0;
}

body{
  font-family: Helvetica;
	background-color: var(--dark);
  /*background-image: url('pics/bg.jpg');*/
	background-attachment: fixed;
	background-size: 150%;
	background-position: top;
  display: block;
	margin: 0% 15%;
  color:var(--light);
	overflow-x: hidden;
}

#menu{
	display:inline-block;
	position:relative;
  height: 10px;
	padding-top: 2vw;
	padding-bottom: 5vw;
	/*margin: 0% -21.5%; /* Ganze breite */
}
 #menu a{
   text-decoration: none;
   color: var(--light);
	 position:relative;
   width:100%;
   text-align: justify;
   font-family: Bold;
   font-size: 3em;
   padding: 0px 10px 0px 8px;
	 -webkit-text-fill-color: var(--dark);
	 -webkit-text-stroke: .06em var(--theme);
 }
#menu label {
	display: none;
}
#hamburger{
	display: none;
}
#lb{
	display: none;
}
 #menu a.active {
	 -webkit-text-fill-color: var(--theme);
	 -webkit-text-stroke: 0em var(--theme);
	 color: var(--theme);
	 opacity: 1;
 }

 #menu a:hover{
	 -webkit-text-fill-color: var(--theme);
	 -webkit-text-stroke: 0em var(--theme);
	 opacity: 1;
   color: var(--theme);
 }
 h1{
	 display: inline-block;
	 text-decoration: none;
   font-size: 8em;
   font-family: Bold;
	 margin-top: 0px;
	 margin-bottom: 0px;
	 color: var(--theme);
	 /*-webkit-text-fill-color: var(--dark); /*OUTLINE DOESNT LOOK TOO GREAT*//*
	 -webkit-text-stroke: .02em var(--theme);*/

 }
 h2{
	 display: inline-block;
	 font-size: 2.5em;
	 font-family: NYBoldItalic;
	 margin-top: 10px;
	 margin-bottom: 0px;
	 margin-left: 0px;
	 padding-bottom: 15px;
	 color: var(--theme);
 }
 p{
   font-size: 1.3em;
   text-align: justify;
 }
 .pc{
	 font-size: 1.3em;
	 text-align: justify;
 }

.bigboi{
opacity: .1;
position: absolute;
top: -.1em;
left: -.6em;
bottom: 0;
right: 0;

padding:0;
padding-left: 330px;

z-index: -1;
overflow: hidden;
	text-align: left;
	font-size: 80vh;
	font-family: Bold;
	-webkit-text-fill-color: var(--dark);
	-webkit-text-stroke: .02em var(--theme);
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;
}

 .imprint{
	 font-size: 1.5em;
   text-align: justify;
	 font-family: LightItalic;
 }
 a{
	 text-decoration: none;
	 color: var(--theme);
 }
 a:hover{
   color: var(--light);
 }
.contact{
	 font-size: 1.3em;
	 text-align: justify;
 }
footer{
	color: var(--theme);
  margin-bottom: 15px;
}
#Lives{
	width:40%;
	float:right;
	margin-top: -11%;
}
#Pipeline{
	width:160%;
	margin-left: -30%;
	margin-top: -20%;
}
#Lend{
margin-top: -22%;
}
#profil {
  width: 600px;
  float:right;
	shape-outside: url("pics/Candid2Freistellung.png");
	shape-margin: 3%;
	margin-top: 0px;
	margin-left: 40px;
	margin-right: -180px;
	margin-bottom: 0px;
}

.art{
	margin:10px;
	width:47.5%;
}
.full{
	margin:10px;
	width: 96.65%;
}
#reel{
	margin: 0% -21.5%; /* Ganze breite */
	width: 143%;
}

.video{
	display: block;
	width:100%;
	height:70vh;
}
main {
}
.blast{
	height:60vh;
}

.fa {
	padding: 20px;
	margin-right: 40px;
	margin-top: 20px;
	width: 50px;
	text-align: center;
  text-decoration: none;
  border-radius: 50%;
	background-color: var(--theme);
  color: var(--dark);
}
#face {
	font-size: 50px;
	}
#insta {
	font-size: 50px;
	}
#spot {
	font-size: 50px;
	}
#sound {
	font-size: 50px;
	}
#you {
	font-size: 50px;
	}
.fa:hover {
  background-color: var(--dark);
	color: var(--theme);
}
.player {
	width:100%;
	height:166px;
	border: none;
}
#blast{
	width:100%;
	height:700px;
	border: none;
}
#mad{
	width:100%;
	height:380px;
	border: none;
}

@media screen and (min-width: 5121px){
	#menu a{
		font-size: 5em;
	}

	h1{
		font-size: 20em;
	}

	h2{
	 font-size: 5em;
	}

	p{
	 font-size: 2.8em;
	}

	.pc{
	 font-size: 2.8em;
	}

.bigboi{
		padding-top: 200px;
		padding-left: 2200px;
		-webkit-text-stroke: .01em var(--theme);
}

	footer{
		font-size: 2.8em;
	}

	#profil{
	width: 1500px;
	margin-top: 800px;
	margin-right: -180px;
	margin-bottom: 0;
	}

}

@media screen and (min-width: 3841px) and (max-width: 5120px){

	#menu a{
		font-size: 5em;
	}

	h1{
		font-size: 20em;
	}

	h2{
	 font-size: 5em;
	}

	p{
	 font-size: 2.8em;
	}

	.pc{
	 font-size: 2.8em;
	}

.bigboi{
	padding-top: 180px;
	padding-left: 1800px;
		-webkit-text-stroke: .01em var(--theme);
}

	footer{
		font-size: 2.8em;
	}

	#profil{
	width: 1200px;
	margin-top: 700px;
	margin-right: -180px;
	margin-bottom: 0;
	}

}

@media screen and (min-width: 2561px) and (max-width: 3840px){

	#menu a{
		font-size: 3.7em;
	}

	h1{
		font-size: 18em;
	}

	h2{
	 font-size: 4.8em;
	}

	p{
	 font-size: 2.2em;
	}

	.pc{
	 font-size: 2.2em;
	}

	footer{
		font-size: 2.2em;
	}

	#profil{
	width: 1200px;
	margin-top: 0;
	margin-right: -180px;
	margin-bottom: 0;
	}

	.bigboi{
		padding-top: 90px;
		padding-left: 1300px;
			-webkit-text-stroke: .013em var(--theme);
	}

}

@media screen and (min-width: 1919px) and (max-width: 2560px){

	#menu a{
		font-size: 3.6em;
	}

	h1{
		font-size: 9.5em;
	}

	h2{
 	 font-size: 2.5em;
  }

  p{
   font-size: 1.6em;
  }

  .pc{
 	 font-size: 1.6em;
  }

	footer{
		font-size: 1.6em;
	}

#profil{
	width: 750px;
	margin-top: 0;
	margin-right: -180px;
	margin-bottom: 0;
}

.bigboi{
	padding-left: 450px;
		-webkit-text-stroke: .017em var(--theme);
}

}

@media screen and (max-width: 1350px) {

#menu a {
	font-size: 3vw;
}

#profil {
	position:relative;
	width: 30vw;
	margin-top: 20px;
	margin-bottom: 20px;
	float: right;
	display: block;
	margin-right: -100px;
}

#Lives{
	width:40%;
	float:right;
	margin-top: -16%;
	margin-right: -4%;
}

h1{
	font-size: 8vw;
}
h2{
	font-size: 3.5vw;
}
.art{
	width:100%;
}
.full{
	width:100%;
}
#reel{
	width:143%;
}

.blast{
	height:500px;
}
.fa {
	padding: 20px;
	margin-right: 20px;
	margin-top: 20px;
	width: 40px;
}
#face {
	font-size: 40px;
	}
#insta {
	font-size: 40px;
	}
#spot {
	font-size: 40px;
	}
#sound {
	font-size: 40px;
	}
#you {
	font-size: 40px;
	}
}
@media screen and (max-width: 836px){

body{
	margin: 0% 0%;
	background-size: 330%;
	background-attachment: fixed;
}

#menu{
	padding-top: 0px;
	text-align: center;
	width: 100%;
	margin: 0%;
  display: block;
  justify-content: space-around;
	height: 60%;
	z-index: 1;
	background-color: var(--dark);

}
#menu a {
	font-size: 2.5em;
	text-align: center;
	margin:auto;
}
#menu label {
    display:block;
    color: var(--light);
    font-size: 2em;
    padding: 10px 0px;
		width:100%;
  }
  #menu a {
		position: static;
    display: none;
		padding: 10px 0px;
  }
  #menu input:checked~a{
    display: block;
  }

	#menu a.active {
			 /*-webkit-text-fill-color: var(--dark);
			 -webkit-text-stroke: 0em var(--dark);*/
			 margin-top: -1000px;
			 padding-bottom: 940px;
	}

h1{
	display:block;
	font-size: 2.5em;
	font-family: Bold;
	text-align: center;
	margin-top: 5px;
	margin-bottom: 0px;
	margin-left: 30px;
	margin-right: 30px;
}
h2{
	display:block;
	font-size: 1.3em;
	text-align: center;
	margin-top: 15px;
	margin-bottom: 0px;
	margin-left: 30px;
	margin-right: 30px;
}
p{
	font-size: .8em;
	margin-left: 30px;
	margin-right: 30px;
}
.pc{
	font-size: .8em;
	text-align: center;
	margin-left: 30px;
	margin-right: 30px;

}

.bigboi{
	font-size: 25vh;
	-webkit-text-fill-color: var(--dark);
	-webkit-text-stroke: .04em var(--theme);
	padding:0;
  padding-top: 50px;
}

a{
	font-size: 1em;
}
.imprint{
	text-align: center;
	font-size: 1.5em;
	margin-bottom: -10px;
	margin-left: 30px;
	margin-right: 30px;
}
.art{
	width: 100%;
	margin:0px;
	margin-bottom: 25px;
}

.full{
	margin:0px;
	margin-bottom: 25px;
}
#reel{
	margin:0;
	width:100%;
	margin-top: -32px;
	margin-bottom: 25px;
}

.video{
	height:212px;
}

#Lives{
	width:40%;
	float:none;
	margin-top: 0%;
	margin-left: 30%;
	margin-bottom: 5%;
}
#Pipeline{
	width:100%;
	margin-left: 0%;
	margin-top: -15%;
}
#Lend{
margin-top: 0;
}
#blast{
	height:500px;
}
#profil {
	position:absolute;
	float: none;
	margin:0px;
	margin-top: 780px;
	margin-left: 5%;
	width: 90%;
}
.fa {
	padding: 20px 0px;
	display: flex;
	margin: 0;
	margin-top: 20px;
	width: 20%;
	font-size: 10px;
  border-radius: 0%;
}
#face {
	font-size: 30px;
	}
#insta {
	font-size: 30px;
	}
#spot {
	font-size: 30px;
	}
#sound {
	font-size: 30px;
	}
#you {
	font-size: 30px;
	}
footer{
  text-align: center;
	margin: 30px;
	margin-top: 0px;
}
}
@media only screen and (orientation: landscape) and (max-width: 836px) {

	#profil{
		position:relative;
	  width: 40%;
	  float: right;
		margin-top: 0;
	  margin-left: 80px;
		margin-right: 20px;
		margin-bottom: 0;
	}
	h1{
		font-size: 5em;
		margin: 3% 10%;
		margin-bottom: 0px;
	}
	h2{
		font-size: 2em;
		margin: 0% 10%;
		margin-bottom: 0px;
	}
	p{
		margin: 2% 10%;
	}
	.art{
		width: 50%;
		margin: -4px;
		margin-left: -1px;
		margin-bottom: 12px;
		margin-top: 12px;
	}
	.full{
		margin: -4px;
		margin-left: -1px;
		margin-bottom: 12px;
		margin-top: 12px;
	}
	#reel{
		margin: -4px;
		margin-left: -1px;
		margin-bottom: 12px;
		margin-top: -35px;
	}

	.video{
		width:80%;
		margin: 0% 10%;
		height:366px;

	}

	.bigboi{
		font-size: 80vh;
		padding:0;
	  padding-top: 40px;
	}

	#blastimg{
		margin-top: 15px;
	}
	#highimg{
		margin-top: 15px;
	}
	.sc{
		width: 80%;
		margin: 4% 10%;
	}
	#blast{
		height: 300px;
	}
	#mad{
		height: 300px;
	}
	#Lives{
		margin-bottom: 0%;
	}
	#Pipeline{
		margin-top: -10%;
	}
}