html {
    -moz-box-sizing: border-box;
    
    -webkit-box-sizing: border-box;
  	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
	scroll-behavior: smooth;
	max-width: 1500px;
	width: 60vw;
	margin: auto;
	background: var(--secondary-clr);
	}


@font-face {
	src: url(fonts/Andrae01.otf);
	font-family: Andrae;
	}

@font-face {
	src: url(fonts/Poppins-Light.ttf);
	font-family: poppins;
	font-weight: 300
	}

@font-face {
	src: url(fonts/Poppins-Regular.ttf);
	font-family: poppins;
	font-weight: 400
	}

@font-face {
	src: url(fonts/Poppins-Medium.ttf);
	font-family: poppins;
	font-weight: 500
	}

@font-face {
	src: url(fonts/Poppins-SemiBold.ttf);
	font-family: poppins;
	font-weight: 600
	}

@font-face {
	src: url(fonts/Poppins-Bold.ttf);
	font-family: poppins;
	font-weight: 700
	}


* {
	margin: 0;
	padding: 0;
	text-decoration: none;
	}


:root {
    --primary-clr: #d8d7d3;
    --secondary-clr:  #141414;
 	--accent-clr: rgb(106, 107, 110); 
	--mute-clr: rgb(54, 54, 54);
	}


::selection {
	background-color: var(--accent-clr);
	color: var(--primary-clr);
	text-decoration-color: var(--primary-clr);

	}


:focus {
	text-decoration: none;
	outline: none;
	
	color: var(--primary-clr);
	}



li, ul {
    list-style: none;
    padding: 0;
    margin: 0;
	}


h1 {
	font-size: .8em;
	font-weight: 500;
	color: var(--primary-clr);}


h2 {
	font-size: 2em;
	color: var(--primary-clr);
	font-weight: 500;
	font-family: andrae;
	margin-bottom: 1em;}


h3 {
	color: var(--primary-clr); 
	font-weight: 500; 
	font-family: andrae; 
	font-size: 1.5em;
}


h4 {
	color: var(--primary-clr); 
	font-weight: 400; 
	font-size: 1em;}


p {
	font-size: .8em;}


a {	
	color:var(--primary-clr);
	cursor: pointer;
	font-size: 1em;
	margin: 0;
	transition: ease-in-out .7s;
	border: solid .1rem;
	border-color: var(--secondary-clr);
	padding: 0 .5ch;
	}

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






section {margin-top: 30vh;}


/* ------------------------------------------------- nav ----------------------------------------- */

#nav	{ 
	
	display: block; 
	margin-top: 5vh;
	height: auto; 
	font-size: 1em; 
	font-family: Andrae; 
	text-align: right;
	}

#nav a {
	display: inline-flex; 
	border: .2rem solid var(--accent-clr);  
	padding: 0 1.5em 0 1.5em; 
	height: 1.5em; 
	transition: ease-in-out .2s; 
	align-items: center; 
	color: var(--accent-clr);  }

#nav a:hover, #nav a:focus {
	
	padding: 0 3em 0 3em; 
	background: var(--mute-clr); 
	border-color: var(--primary-clr); 
	
	color: var(--primary-clr); 
	/* letter-spacing: .2ch;  */
}


	.cont	{ 
	
		display: block; 
		margin-top: 5vh;
		margin: auto;
		height: auto; 
		font-size: 1em; 
		font-family: Andrae; 
		text-align: center;
		
		}
	
	.cont a {
		display: inline-flex; 
		border: .2rem solid var(--accent-clr);  
		padding: 0 1.5em 0 1.5em; 
		height: 1.5em; 
		transition: ease-in-out .2s; 
		align-items: center; 
		color: var(--accent-clr);  }
	
	.cont a:hover, #nav a:focus {
		
		padding: 0 3em 0 3em;
		background: var(--mute-clr); 
		border-color: var(--primary-clr); 
		color: var(--primary-clr); 
		/* letter-spacing: .2ch;   */

}


/* ------------------------------------------------- logo ----------------------------------------- */






#logo {

    width: 70%; 
    display: block;
    margin: 20vh auto;
    height: 100%;
    border: none;
    fill: var(--primary-clr);}




/* ------------------------------------------------- carousel ----------------------------------------- */

.carousel {
	color: var(--primary-clr);
	display: flex;
	justify-content: center;
	position: relative;
	height: auto;
	width: 100%;
	padding: 0;
	font-size: 40px;
	margin: auto;
}
	
	.wrapper_left, .wrapper_right {
	
		display: block;
		height: 5em;
		width: 45%;
		padding: .15ch;
		
	
	}
	
	.carousel_static {
		display: flex;
		overflow: hidden;
		position: relative;
		width: auto;
		height: 2.5em;
		align-items: center;
		justify-content: end;
		font-weight: 200;
		font-family: poppins;
	   }

	.carousel_title  {
		display: flex;
		height: 100%;
		align-items: center;
		position: absolute;
		width: auto;
		font-size: .9em;
		
	}
	
	.carousel_left, .carousel_right {
		overflow: hidden;
		position: relative;
		width: auto;
		height: 2.5em;
		
	 
	}
	
	.carousel_item_left, .carousel_item_right {
		display: flex;
		height: 100%;
		align-items: center;
		position: absolute;
		width: auto;
		opacity: 0;
		will-change: transform, opacity;}
	
	
	
	.carousel_item_left {
		right: 0%;
		font-weight: 300;
		font-family: poppins;

	}
	
		
	  .carousel_item_right_single {
		display: flex;
		height: 100%;
		align-items: center;
		position: absolute;
		width: auto;
		opacity: 0;
		will-change: transform, opacity;
		font-family: Andrae;
		font-weight: 500;
		letter-spacing: .05em;
		-webkit-animation: carousel-animate-vertical-right-single 8s ease-in-out infinite;
				animation: carousel-animate-vertical-right-single 8s ease-in-out infinite;
	}
	
	.carousel_item_right_single:nth-child(1) {
		-webkit-animation-delay: calc(8s / 6 * -1);
				animation-delay: calc(8s / 6 * -1);
	  }
	  
	.carousel_item_right_single:nth-child(2) {
		-webkit-animation-delay: calc(8s / 6 * 0);
				animation-delay: calc(8s / 6 * 0);
	  }
	  
	.carousel_item_right_single:nth-child(3) {
		-webkit-animation-delay: calc(8s / 6 * 1);
				animation-delay: calc(8s / 6 * 1);
	  }
	
	.carousel_item_right_single:nth-child(4) {
		-webkit-animation-delay: calc(8s / 6 * 2);
				animation-delay: calc(8s / 6 * 2);
	  }
	
	.carousel_item_right_single:nth-child(5) {
		-webkit-animation-delay: calc(8s / 6 * 3);
				animation-delay: calc(8s / 6 * 3);
	  }
	
	
	.carousel_item_right_single:last-child {
		-webkit-animation-delay: calc(-8s / 6 * 2);
				animation-delay: calc(-8s / 6 * 2);
	  }
	
	
	  @keyframes carousel-animate-vertical-right-single {
		0% {
			transform: translateY(100%);
			opacity: 0;
			visibility: hidden;
		  }
	  
		  /* (slide change timing)%, (100 / no. items)% */
		  3%, 16.6666666666% {
			transform: translateY(100%);
			opacity: 0.4;
			visibility: visible;
		  }
	  
		  /* (100 / no. items + slide change timing)%, (100 / no. items * 2)% */
		  19.6666666666%, 33.3333333333% {
			transform: translateY(0);
			opacity: 1;
			visibility: visible;
		  }
	  
		  /* (100 / no. items * 2 + slide change timing)%, (100 / no. items * 3)% */
		  36.3333333333%, 50% {
			transform: translateY(-100%);
			opacity: 0.4;
			visibility: visible;
		  }
	  
		  /* (100 / no. items * 3 + slide change timing)% */
		  53% {
			transform: translateY(-100%);
			opacity: 0;
			visibility: visible;
		  }
	  
		  100% {
			transform: translateY(-100%);
			opacity: 0;
			visibility: hidden;
		  }
		}








/* ------------------------------------------------- intro ----------------------------------------- */



#intro p {
	color: var(--primary-clr);  
	font-size: 1.2em; 
	text-align: center;
}









/* ---------------------------------------------------contact form----------------------------------------------- */

.contact {
	width: auto;
	margin: none;
	padding: none;
	display: block;
	line-height: .5; 
}


.contact button, .contact input, .contact textarea {
	display: block;
	margin: auto;
	background: none; 
	width: 95%; 
	border: .2rem solid var(--accent-clr); 
	text-align: center; 
	color: var(--primary-clr); 
	height: 2em;
	
} 


.contact button {
	font-size: 1.2em; 
	font-family: Andrae; 
	width: auto; 
	padding: 0em 3em 0em 3em;
	color: var(--accent-clr); 
}


.contact textarea {
	height: 8em; 
	padding-top: .5em;
}


.contact ::placeholder {
	
}


.contact input:hover::placeholder, .contact textarea:hover::placeholder, .contact button:focus::placeholder {
	color: var(--primary-clr);
}


input:hover, textarea:hover, input:focus, textarea:focus, button:hover, button:focus{
	background: var(--mute-clr); 
	width: 100%; 
	border-color: var(--primary-clr); 
	transition: ease-in-out .2s; 
	color: var(--primary-clr); 
	letter-spacing: .2ch;}		


button:hover, button:focus {
	cursor: pointer;
	padding: 0em 5em 0em 5em;
	width: inherit;
}       














/* ---------------------------------------- projects --------------------------------------- */

.project-container ul {
	
	display: grid;
	position: relative;
	

	grid-template-columns: repeat(3, 1fr);
	
	grid-gap: 1em;
	/* padding: 1em; */
	text-align: center;
	grid-template-rows: auto;
}





.project-container h4 {
	/* bottom: 1.5em;  */
	 
}


.project-container a {
	
   
	display:block;
	margin: 0; 
	padding: 0; 
	border-width: .2rem; 
	overflow: hidden;
}


.project-container a:hover, .project-container  a:focus  {
	border-color: var(--primary-clr);
	cursor: pointer; 
	

	color: var(--primary-clr);
}
	
.project-container a:hover h3, .project-container  a:focus h3, .project-container a:hover h4, .project-container  a:focus h4 {
	/* transform: translateY(30%);  */
	
	
}


.project-container a ,  {
	/* transform: translateY(-5em);  */
	transition: ease-in-out .7s; 
	
	
	
}


.project-container a:hover img, .project-container  a:focus img, .project-container a:hover video, .project-container  a:focus video {
	/* transform: translateY(-5em);  */
	transition: ease-in-out .2s; 
	border-color: var(--primary-clr);
	scale: 1.3; 

	
	
}


.project-container  a div {
	overflow: hidden;
	position:relative;
	padding: 0;
}

.project-container div a	{
	color: var(--accent-clr);
	height: auto; 
	width: auto	; 
	position: relative; 
	display: block; 
	
}


.project-container img, .project-container video {
	/* border-bottom: var(--accent-clr) solid .2rem;  */
	width: 100%; 
	margin: 0;
	scale: 1.1; 
	

}


.project-container div {position: relative; }



/* ------------------------------ imprint ----------------------------- */



#imprint p {
	color: var(--accent-clr); 
	font-size: .7rem;}


#imprint h3 {
	border-top: .2rem solid var(--accent-clr); 
	margin-bottom: 2em;
	padding-top: .5em;
}


#imprint {
   
    overflow: hidden;
	padding-top: 10vh;
	width: 95%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 2em;
	margin-top: 50vh;
	padding-bottom: 5%;
	color: var(--secondary-clr);
	}


#imprint div p {
	position: relative;
	background: none;
	}


@media only screen and (max-width: 1100px) {
  html {
   
    width: 80vw;
  }
  .project-container ul {
	
	grid-template-columns: 1fr;
	margin: 5em;
	
	
      
  }
  
  #imprint {	grid-template-columns: 1fr; grid-gap: 10vh;}
  #logo {

    width: 100%; }
    .carousel {

	}
}