@font-face {
	font-family: "Orbitron Bold";
	src: url('Assets/Fonts/Orbitron Bold.ttf');
  	src: url('Assets/Fonts/Orbitron Bold.ttf') format('truetype');
}

@font-face {
  	font-family: "Kishimen Sword";
  	src: url('Assets/Fonts/KishimenSword.otf');
  	src: url('Assets/Fonts/KishimenSword.otf') format('opentype');
}

@font-face {
  	font-family: "HypeType";
  	src: url('Assets/Fonts/HypeType.otf');
  	src: url('Assets/Fonts/HypeType.otf') format('opentype');
}

@media screen and (min-width:1200px) { /* Wide-Screen, Desktop mode */

	.background-image {
		position: fixed;
		height: 93vh;
		top: 4.5%;
		left: 5.5%;
	}

	.banner-flex {
		display: flex;
		justify-content: center;
		align-items: center; 
		flex-direction: row;
		flex-wrap: nowrap;
		margin-bottom: 8vh;
	}

	.offset-r {
		float: right;
		width: 66%;
	}

	.background {
		position: fixed;
		width: 100%;
		height: 100%;
		top:0;
		left:0;
		clip-path: ellipse(72% 68% at 73% 42%);
		background-image: linear-gradient(#2791a6, #bfeedc);
	}

	.background-border{
		position: fixed;
		width: 100%;
		height: 100%;
		top:0;
		left:0;
		clip-path: ellipse(70% 64.5% at 73% 42%);
		background-color: #b4ebff;
	}

	.background-solid {
		position: fixed;
		width: 100%;
		height: 100%;
		top:0;
		left:0;
		background-color: #222f48;
		z-index: -1;
	}

	.banner {
		width: 370px;
		position: relative;
		bottom: 40px;
		display: inline-block;
		padding: 15px;
	}

	.subbanner {
		display: flex;
		justify-content: center;
		align-items: center; 
		margin: auto;
		text-align: center;
		flex-direction: column;
		width:100%;
	}

	h1 {
		font-family: "HypeType", Arial, Tahoma, sans-serif;
		font-size: 3.333vw;
		color: #2791a6;
		text-shadow: 5px 5px #bfeedc;
		text-align: center;
		margin-bottom: 15px;
	}

	h2 {
		font-family: "Kishimen Sword", Arial, Tahoma, sans-serif;
		font-size: 3.13vw;
		color: #2791a6;
		text-shadow: 5px 5px #bfeedc;
		text-align: center;
	}

	body {
	  font-family: "Orbitron Bold", Arial, Tahoma, sans-serif;
	  font-size: 0.83vw;
	  color: #b4ebff;
  }
}

@media screen and (max-width:1199px) { /* Narrow-Screen, Mobile mode */

	.background-image {
		position: relative;
		width: 100%;
		max-width: 450px;
	}

	.banner-flex {
		display: flex;
		justify-content: center;
		align-items: center; 
		flex-direction: column;
		flex-wrap: nowrap;
	}

	.offset-r {
		float: right;
		width: 100%;
	}

	.background {
		position: fixed;
		width: 100%;
		height: 100%;
		top:0;
		left:0;
		clip-path: ellipse(72% 80% at 73% 42%);
		background-image: linear-gradient(#2791a6, #bfeedc);
	}

	.background-border{
		position: fixed;
		width: 100%;
		height: 100%;
		top:0;
		left:0;
		clip-path: ellipse(70% 75% at 73% 42%);
		background-color: #b4ebff;
	}

	.background-solid {
		position: fixed;
		width: 100%;
		height: 100%;
		top:0;
		left:0;
		background-color: #222f48;
		z-index: -1;
	}

	.banner {
		margin: auto;
		text-align: center;
		width: 370px;
		position: relative;
		padding: 15px;
	}

	.subbanner {
		margin: auto;
		text-align: center;
		width:100%;
	}

	h1 {
		font-family: "HypeType", Arial, Tahoma, sans-serif;
		font-size: 80px;
		color: #2791a6;
		text-shadow: 5px 5px #bfeedc;
		text-align: center;
		margin-bottom: 0px;
	}

	h2 {
		font-family: "Kishimen Sword", Arial, Tahoma, sans-serif;
		font-size: 60px;
		color: #2791a6;
		text-shadow: 5px 5px #bfeedc;
		text-align: center;
		margin-top: 0px;
	}

	body {
	font-family: "Orbitron Bold", Arial, Tahoma, sans-serif;
	font-size: 16px;
	color: #b4ebff;
  }
}



a:link {
  color: #2791a6;
}

a:visited {
  color: #2791a6;
}

a:hover {
  color: blue;
}

a {
	transition: color 0.25s;
}

.info-table {
	text-align: center;
	font-size: 22px;
	margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}

.website-footer{
	display: flex;
	justify-content: center;
	align-items: center; 
	margin: auto;
	text-align: center;
	flex-direction: column;
	width: 20%;
	min-width: 320px;
	font-size: 12px;
}

.audio-header {
	text-align: left;
	position: relative;
	left: 12%;
	width: 20%;
	min-width: 130px;
}

.audio-player {
	width:80%;
	float: center;
	left: 10%;
	padding-top: 12px;
	padding-bottom: 36px;
}

.character-image{
	border: 3px solid #2791a6;
	width: 15%;
	margin: 3px;
	background-image: linear-gradient(#bfeedc, #2791a6);
}

th, td {
	padding: 6px;
}

h3 {
	font-family: "Kishimen Sword", Arial, Tahoma, sans-serif;
	font-size: 1.55vw;
	color: #2791a6;
	text-shadow: 5px 5px #bfeedc;
	text-align: center;
	margin-bottom: 10px;
}