#hero {
	font-family: dharma-gothic-e, sans-serif;

	overflow: hidden;
	border: 8px var(--tan) solid;
	
	background: 
		url('./imgs/DAS_BOOT.png') right bottom / contain no-repeat,
		url('./imgs/STARBURST.png') left bottom / auto 300px no-repeat;
	background-color: var(--teal);
}

.tagline-1, .tagline-2, .tagline-3 {
	display: flex;
	flex-flow: column;
	align-items: flex-start;
	width: fit-content;
	margin: 16px 0;

	transform-origin: 0 0;
}

#hero h1 {
	margin: 0;
	line-height: 1;

	padding: 0px 16px;

	background-color: var(--tan);
	text-transform: uppercase;
	letter-spacing: 1px;

	font-size: 64px;
	font-weight: 900;
	font-style: normal;
}

#hero h1:not(:first-child) {
	margin-top: -8px;
}

#hero h1.centre {
	align-self: center;
}

#hero h1:first-child {
	padding-top: 8px;
}

#hero h1:last-child {
	padding-bottom: 8px;
}

#hero h1 .small {
	font-size: 48px;
}

.tagline-1 {
	transform: skewX(-6deg) rotate(-6deg) scale(1.2);
}

.tagline-2 {
	transform: skewX(-8deg) rotate(-8deg); margin-left: 16px;
}

.tagline-3 {
	transform: skewX(-4deg) rotate(-4deg); margin-top: -32px;
}

@media (min-width: 1048px) {
	.tagline-1 {
		display: flex;
		flex-flow: row nowrap;
	}

	.tagline-1 > h1:first-child {
		font-size: 72px !important;
	}

	.tagline-1 > h1:last-child {
		font-size: 92px !important;
		margin-top: 32px !important;
		padding-top: 32px !important;
		margin-left: -2px !important;
	}

	#hero > div:not(.tagline-1) {
		display: flex;
		flex-flow: row nowrap;
		column-gap: 64px;
		margin-left: 275px;
		margin-top: -32px;
	}
}

@media (min-width: 1338px) {
	#hero h1 {
		font-size: 72px;
	}

	#hero h1 .small {
		font-size: 64px;
	}

	.tagline-1 > h1:first-child {
		font-size: 98px !important;
	}

	.tagline-1 > h1:last-child {
		font-size: 128px !important;
		margin-top: 32px !important;
		padding-top: 32px !important;
	}

	#hero > div:not(.tagline-1) {
		column-gap: 156px;
		margin-left: 400px;
		margin-top: -64px;
	}
}