@font-face {
  font-family:heading;
  src: url(fonts/Montserrat-Light.ttf);
}
@font-face {
  font-family:body;
  src: url(fonts/ScopeOne-Regular.ttf);
}

html,body{
	color:#000;
	margin:0;
	position:relative;
	height:100%;
	background-color:rgb(250,250,242);
	font-family:body;
}

header{
	position:fixed;
	width:100%;
	z-index:995;
	top:0;
	background-color:rgb(250,250,242);
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	padding-top:1.5rem;
	padding-bottom:0.8rem;
	font-size:1rem;
	font-family:heading;
}

footer{
	min-height:1rem;
	color:#000;
	font-size:1.1rem;
}

.footer-contents{
	position:absolute;
	left:50%;
	transform:translate(-50%);
	padding-top:3rem;
	padding-bottom:3rem;
	text-align:center;
}

.noselect{
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


#circle{
	position:absolute;
	top:48%;
	left:50%;
	transform:translate(-50%,-50%);
	border-radius:50%;
	overflow:hidden;
	background:url(media/bg_dreieck.gif) no-repeat;
	background-size:cover;
	background-position:center;
	filter:hue-rotate(0deg);
	-webkit-filter:hue-rotate(0deg);
	-moz-filter:hue-rotate(0deg);
	-ms-filter:hue-rotate(0deg);
	margin:auto;
	width:31vh;
	height:31vh;
	cursor:wait;
	animation: 
}

#spacer{
	height:100%;
}


.impressum{
  padding-top:200px;
}

.main-contents{
	display:flex;
	flex-flow:column wrap;
	font-size:1.3rem;
	margin-left:1.5vh;
	margin-right:1.5vh;
	line-height:150%;
	text-align:left;
}

.big-letter::first-letter {
	font-size:142%;
	color:rgb(255,153,153);
	font-weight:bold;
	padding-right:3px;
	}

.email-container{
    text-align:center;
    padding-top:121px;
    padding-bottom:222px;
}

a.email{
    text-decoration:none;
    color:rgb(220,133,133);
    cursor:help;
    letter-spacing:7px;
    padding:7px 13px 7px 19px;
}

a.email:hover{
	background-color:rgb(220,133,133);
	color:#000;
}

#portrait{
	display:block;
	width:42%;
	margin-left:auto;
	margin-right:auto;
	padding:100px 0 100px 0;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	-webkit-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
}

#anchor-about{
	position:relative;
	top:-101px;
	visibility:hidden;
}
#anchor-projects{
	position:relative;
	top:-102px;
	visibility:hidden;
}
#anchor-contact{
	position:relative;
	top:-103px;
	visibility:hidden;
}
#mobile-menu-button{
	display:none;
	margin:auto;
	margin-right:10%;
	font-size:2rem;
	text-decoration: none;
	color:#000
}
#mobile-menu{
	display:none;
	position:absolute;
	right:0;
	top:0.5rem;
	background-color:rgb(255,153,153);
	padding: 0.5rem 3rem 0.5rem 2.5rem;
}
#mobile-menu-contents{
	text-decoration:none;
	color:#000;
}
#mobile-menu:target{
	display:flex;
	background-color:rgb(255,153,153);
}



/* ---------------------------------------------------------------------*/

.accordion {
	flex:0 1 42%;
	background-color: inherit;
	cursor: pointer;
	border: 0px;
	border-style:none;
	outline:none;
	border-radius: 10px;
	transition: 1.7s;
}

.panel {
	padding: 0 18px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 1.1s ease;
}

.accordion:hover h3{
	text-decoration:underline;
}

.panel img{
	width:100%;
}
/* ---------------------------------------------------------------------*/

.carousel-container{
	position: relative;
	margin:auto;
	overflow:hidden;
}

.carousel-slide{
	display:flex;
	width:100%;
}

.prevBtn{
	position: absolute;
	top:45%;
	left:5%;
	color:rgb(255,0,255);
	background:none;
	border:none;
	font-size: 2rem;
	cursor:pointer;
}

.nextBtn{
	position: absolute;
	top:45%;
	right:-5%;
	color:rgb(255,0,255);
	background:none;
	border:none;
	font-size: 2rem;
	cursor:pointer;
}



.video-container{
	position:relative;
	width:100%;
	height:0;
	padding-bottom:56.25%;
	padding-bottom:calc(56.25% + 0.5625*3vh);
}

iframe{
	position:absolute;
	top:0;
	width:100%;
	width:calc(100%+100vh);
	height:100%;
	border:none;
}
video{
	position:absolute;
	top:0;
	width:100%;
	width:calc(100%+100vh);
	height:100%;
	border:none;
  	cursor:pointer;
}


hr{
	border:none;
	height:1px;
	background-color:#000;
	width:84%;
	margin: 3rem auto 2rem auto;
}

h1{
	font-size:1.3rem;
	margin:0;
	padding-left:2rem;
	font-weight:normal;
	cursor:crosshair;
}
#title-link{
  text-decoration:none;
  color:inherit;
  cursor:crosshair;
}

h3{
	font-size:2.7rem;
	font-family:heading;
	font-weight:normal;
	text-align:center;
	letter-spacing:3px;
  line-height:120%;
}
h4{
	font-size:1.3rem;
	font-family:body;
	font-weight:normal;
	text-align:center;
}

ul{
	margin:0;
	padding-right:2rem;
	display:flex;
}

li{
	list-style-type:none;
	margin:auto;
}

li a{
	color:rgb(42,42,42);
	text-decoration:none;
	padding:1rem;
}

li a:hover{
	background-color:rgb(220,133,133);
}

a#about{
	cursor:zoom-in;
}

a#projects{
	cursor:cell;
}

a#contact{
	cursor:help;
}

footer a{
	text-decoration:none;
	color:#000;
}



@media screen and (max-width: 700px){
	.main-contents{
		font-size:1.3rem;
	}
  a.email{
      font-size:1.1rem;
      padding:0;
  }
	header{
		justify-content:flex-start;
		line-height:200%;
		padding-top:1rem;
		padding-left:1rem;
	}
	h1{
		padding-left:0;
		font-size:1.5rem;
	}
	ul{
		padding:0;
		margin:0;
		display:none;
	}
	iframe{
		width:106%;
		left:-3%;
	}
  video{
    width:106%;
    left:-3%;
  }
	#mobile-menu-button{
    display:inline;
	}
}

@media screen and (min-width: 700px){
	.main-contents{
		margin-left:11vw;
		margin-right:11vw;
	}
  #portrait{
    width:25%;
  }
}

@media screen and (min-width: 1200px){
	.main-contents{
		margin-left:21vw;
		margin-right:21vw;
	}
  #portrait{
    width:20%;
  }
}

@media screen and (min-width: 1800px){
	.main-contents{
		margin-left:31vw;
		margin-right:31vw;
	}
}