@font-face {
	font-family: 'custom-font';
	src: url('../fonts/PlusJakartaSans-VariableFont_wght.ttf');
	font-weight: normal;
	font-style: normal;
}

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: 'custom-font';
	font-size: 0.9em;
	overflow: hidden;
	background-color: #cccccc;
}

p {
	margin-top: 0;
	padding: 0;
}

#title {
	position: absolute;
	right: 1.5em;
	top: 1.5em;
	z-index: 1;
}

h1 {
	font-size: 2.6em;
	font-weight: 200;
	color: #c76363;
	letter-spacing: 0.15em;
	padding: 0;
	margin: 0;
}

#music {
	position: absolute;
	left: 1.5em;
	top: 1.5em;
	height: 42px;
	z-index: 1;
}

#footer {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 8em;
	color: #333333;
	background: linear-gradient(#CCCCCC00 0%, #CCCCCCFF 100%);
	z-index: 1;
}

#footer-content {
	margin: 1.5em;
}

#footer p {
	font-size: 0.9em;
	margin: 1.5em;
}

#bandcamp {
	float: left;
	width: 25em;
	height: 5em;
}

#bandcamp-icon {
	float: left;
	height: 100%;
	margin-right: 1em;
}

#line {
	float: left;
	width: 45em;
	height: 5em;
}

#line-icon {
	float: left;
	height: 100%;
	margin-right: 1em;
}

#qr-code-wrapper {
	text-align: center;
	padding: 1em;
}

#qr-code {
	max-width: 100%;
}


@media screen and (max-width: 768px) {
	#title {
		left: 1em;
		right: 1em;
		top: 1em;
		text-align: center;
	}

	#music {
		left: 0;
		bottom: 0;
		top: auto;
		width: 100%;
		z-index: 2;
	}

	#footer {
		bottom: 42px;
		height: 13em;
	}

	#footer-content {
		margin: 1em;
	}

	#footer p {
		margin: 0;
	}

	#bandcamp {
		width: 100%;
		height: 5em;
		margin-bottom: 1em;
	}
	
	#line {
		width: 100%;
		height: 5em;
	}
}