@font-face {
	font-family: 'Plain';
	src: url('../fonts/Plain-Light.woff2') format('woff2'),
		url('../fonts/Plain-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}




:root {
	--color-main: black;
	--color-secondary: #bfbfbf;
	
	--fontsize-base: 30px;
	
	--abstand: 15px;
	--header-height: 55px;
}


html{
	font-size:var(--fontsize-base);
}
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	
	background-color:white;
	color:var(--color-main);
	font-family:'Plain','Arial',sans-serif;
	
	font-size:var(--fontsize-base);
	line-height:1.2;
	margin:0px;
}

body{
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

body.no-scroll{
	overflow-y:hidden;
}



h1{
	
}
h2{
	
}

h3{
	
}

a{
	text-decoration: none;
	text-decoration-thickness: from-font;
	transition:all .2s ease;
	color:inherit;
}
a:hover{
	
}

a.btn{
	display:inline-block;
	border-radius: var(--border-radius);
	background-color:var(--color-secondary);
}
a.btn:hover{
	background-color:var(--color-main);
	color:white;
}


/* ---------------------------------
	
	GENERAL LAYOUT STUFF
	
-----------------------------------*/

.page-wrapper{
	width:100vw;
	height:100vh;
	max-height:100vh;
	display: flex;
	flex-direction: column;
}

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

header{
	height:var(--header-height);
	background:white;
	display:flex;
	justify-content: space-between;
	align-items: center;
	padding:0 var(--abstand);
}
header a,header a span{
	color:var(--color-secondary);
}
.logo{
	color:var(--color-main);
	pointer-events: none;
}

nav ul{
	
}
nav ul li{
	display:inline-block;
	padding-left:var(--abstand);
}
nav a{
	transition: color .2s ease;
	display:flex;
	align-items: center;
}

nav a:hover{
	color:var(--color-main);
}
nav a path{
	fill:var(--color-secondary);
	transition: fill .2s ease;
}

nav a:hover path{
	fill: var(--color-main);
}

.icon{
	display:inline-block;
	width:0.7rem;
	height:0.7rem;
	margin-right:3px;
}
.icon svg{
	display:block;
	width:100%;
	height:100%;
}




/* ---------------------------------
	
	SITE: HOME
	
-----------------------------------*/

main{
	height:calc(100vh - var(--header-height));
}
.swiper, .swiper-wrapper, .swiper-slide, .swiper-slide img{
	height:100%;
}
.swiper-slide img{
	object-fit: cover;
}

/* ---------------------------------
	
	RESPONSIVE
	
-----------------------------------*/

@media screen and (max-width: 980px) {
	:root {
		--fontsize-base: 25px;
		--header-height:40px;
	}
}


/* MOBILE */
@media screen and (max-width: 860px) {
	body,html,.page-wrapper{
		height: 100svh;
		max-height: 100svh;
	}
	.page-wrapper{
		overflow: hidden;
	}
	header{
		height:auto;
		flex-direction: column;
		align-items: flex-start;
		padding-bottom:var(--abstand)
	}
	.logo span{
		display:block;
	}
	
	nav{
		align-self: end;
		text-align: right;
		margin-top:-30px;
	}
	nav ul li{
		padding:0;
		display: block;
	}
	
	main{
		height:100%;
	}

}

@media screen and (max-width: 400px) {
	:root {
		--fontsize-base: 20px;
		--abstand:12px; 
	}
	nav{
		margin-top:-24px;
	}
}
@media screen and (max-width: 325px) {
	nav{
		margin-top:0px;
	}
}