@font-face {
  font-family: 'Merriweather';
  src: url('/Font/Merriweather.ttf') format('truetype-variations');
  font-weight: 100 900;   /* this tells the browser the weight range */
  font-style: normal;
}

@font-face {
  font-family: 'Merriweather';
  src: url('/Font/Merriweather_Italic.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
}

@font-face {
  font-family: 'Mittelschrift';
  src: url('/Font/Mittelschrift.ttf') format('truetype-variations');
  font-weight: 100 900;   /* this tells the browser the weight range */
  font-style: normal;
}

@font-face {
  font-family: 'Mittelschrift';
  src: url('/Font/Mittelschrift_Bold.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: oblique;
}

@font-face {
  font-family: 'Roboto';
  src: url('/Font/Roboto.ttf') format('truetype-variations');
  font-weight: 100 900;   /* this tells the browser the weight range */
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('/Font/Roboto_Italic.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
}

/* desktop or monitor - based on viewport height */
.contact {
	font-family: 'Mittelschrift';
	font-size: clamp(20px, 2.5vh, 50px); 
	font-weight: 300;
	color: #595959;
	letter-spacing: 0.08em;	
}

.impressum {
	font-family: 'Roboto';
	font-size: clamp(10px, 1.6vh, 50px);
	font-style: normal;
	font-weight: 300;
	color: #7F7F7F;
	letter-spacing: 0.05em;
}

.keyword { 
	font-family: 'Roboto';
	font-size: clamp(10px, 1.6vh, 50px);
	font-style: normal;
	font-weight: 300;
	color: #7F7F7F;
	letter-spacing: 0.05em;
}

.paragraph {
	font-family: 'Roboto';
	font-size: clamp(12px, 2vh, 60px); 
	font-weight: 300;
	color: #1C1C1C;
	line-height: 1.5;
}

.title {
	font-family: 'Merriweather';
	font-size: clamp(24px, 3vh, 60px); 
	font-weight: 300;
	color: #1C1C1C;
}


.logo {
	
}

@media (orientation: portrait) {	
	.contact {
		font-size: 5vw;	
	}
	
	.impressum { 
		font-size: 3.4vw;
	}
	
	.keyword {
		font-size: 3.4vw;
	}

	.paragraph {
		font-size: 4.2vw;
	}

	.title {
		font-size: 6.3vw;
	}	
}

@media (orientation: landscape) and (min-resolution: 2.01dppx) {
	.contact {
		font-size: 5vw;	
	}
	
	.impressum { 
		font-size: 1.7vw;
	}
	
	.keyword {
		font-size: 1.7vw;
	}

	.paragraph {
		font-size: 2.1vw;
	}

	.title {
		font-size: 3.1vw;
	}
}