<script lang="ts">
	export let title: string;
	export let subtitle: string = '';
</script>

<header>
	<h1>{title}</h1>
	{#if subtitle}
		<h2>{subtitle}</h2>
	{/if}
</header>

<style>
	header {
		font-family: shadowsintolight;
		font-size: 4.8vw;
		font-weight: bolder;
		margin: 0px;
		padding: 0px;
		padding-bottom: 5px;
		text-align: center;
		background-color: var(--second-bg-color);
		box-shadow: 0px 3px 2px rgba(0,0,0,0.19);
		color: var(--second-heading-color);
	}

	h1 {
		margin: 0;
		padding: 0;
		padding-top: 5px;
	}

	h2 {
		margin-top: 0px;
	}

	@media (min-width: 490px) {
		header {
			font-size: 23px;
		}
	}
</style>
