#header {
	$gap: 1rem;

	--foregroundColour: var(--backgroundColour);

	align-items:                center;
	background-color:           var(--backgroundColour);
	background-size:            cover;
	border-bottom-left-radius:  $padding;
	border-bottom-right-radius: $padding;
	box-shadow:                 0 0 calc($padding / 2) $shadowColour;
	display:                    flex;
	height:                     calc(100vh + $padding);
	image-rendering:            pixelated;
	justify-content:            center;
	overflow:                   hidden;
	padding-bottom:             $padding;
	position:                   relative;
	user-select:                none;
	width:                      100%;

	#glyph {
		aspect-ratio:    1;
		display:         block;
		image-rendering: pixelated;
		object-fit:      contain;
		width:           50vmin;
	}

	@import "navBar";
}