/*This style sheet resolves an issue with the footer symbol overlapping the footer text when adjusting browser window size or when zooming in or out*/
:root {
	--symbol-size: 59px;
	--visual-overlap: 0.45rem;
	--footer-buffer: 0.5rem; /*extra gap so text never touches symbol*/
}

/*fixed square container so size won't grow with viewport*/
#symbol {
	width: var(--symbol-size);
	height: var(--symbol-size);
	margin: 0 auto;
	position: relative; /*keeps layout space*/
	overflow: visible;
}

	/*image fills the fixed square without distortion*/
	#symbol img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		display: block;
		transform: translateY(calc(-1 * var(--visual-overlap))); /*small fixed overlap*/
		transform-origin: center top;
	}

/*reserve enough space above footer so text can't be covered*/
#wrap {
	padding-top: calc(var(--visual-overlap) + var(--footer-buffer));
}