@font-face {
  font-family: 'PersianSword';
  src: url('PersianSwordRegular.woff') format('woff');
}

body { 
	background-image: url("Splasher.png"); 
	background-position: center center; 
	background-repeat: no-repeat; 
	background-attachment: fixed; 
	background-size: cover; 
	background-color: #fbfbfa; 
}

.title {
	text-align: center;
	font-family: 'PersianSword', Arial, sans-serif;
	font-size: 10vw;
	padding: 25px 0px 0px 0px;
	margin: 0px;
}

.subtitle {
	text-align: center;
	font-family: 'PersianSword', Arial, sans-serif;
	font-size: 8vw;
	padding: -5px 0px 0px 0px;
	margin: 0px;
}

.bar {
	background-color: transparent;
	overflow: hidden;
	display: flex;
	justify-content: center;
}

.bar a {
	font-family: 'PersianSword', Calibri, sans-serif;
	float: left;
	color: #96aaaf;
	text-align: center;
	padding: 12px 16px 5px 16px;
	text-decoration: none;
	font-size: 5vw;
}

.bar a:hover {
	background-color: transparent;
	color: black;
}

.bar a.active {
	background-color: transparent;
	color: black;
}

@media screen and (min-width: 1200px) {
	.title {
		font-size: 60px;
		margin: 0px;
		padding: 20px 0px 0px 0px;
	}
	
	.subtitle {
		font-size: 40px;
	}
	
	.bar a {
		font-size: 25px;
		padding: 0px 16px 0px 16px;
	}
	
}

@media (orientation: landscape) and (max-width: 1200px) { 
	body { 
		background-image: url("SplasherLandscape.png"); 
		background-position: bottom center; 
		background-repeat: no-repeat; 
		background-attachment: fixed; 
		background-size: cover; 
		background-color: #fbfbfa; 
	}
	
	.title {
		font-size: 4vw;
		text-align: left;
	}
	
	.subtitle {
		font-size: 3vw;
		text-align: left;
	}
	
	.bar {
		background-color: transparent;
		display: flex;
		justify-content: left;
	}
	
	.bar a {
		font-size: 2vw;
	}
}