path: root/css/footer.scss

@use "sass:list";

#footer {
	background-color:        var(--foregroundColour);
	border-top-left-radius:  calc($padding / 2);
	border-top-right-radius: calc($padding / 2);
	font-family:             $codeFont;
	margin:                  auto;
	max-width:               calc($contentWidth + $padding * 2);
	padding:                 $padding;
	text-align:              center;
	width:                   100%;

	#romanisation {
		$width:  31;
		$height: 11;

		$actualHeight: 4em;

		aspect-ratio:     list.slash($width, $height);
		background-color: var(--textColour);
		image-rendering:  pixelated;
		margin:           auto;
		mask-image:       url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAALCAQAAAAt4J4/AAAATElEQVQoz9WRwQ4AMARDdfH/v9wdlghBlrnNDU8rQIbBQcf3KSxJJq7WjfVKjQ1n2XIw7svzUEZo0M1+wRgCBqNy+OHc2l7m9R//xQbPdSTsn4rEMwAAAABJRU5ErkJggg");
		mask-size:        cover;
		max-height:       $actualHeight;
		max-width:        calc($actualHeight * ($width / $height));
	}

	#starDescription {
		$width: calc($contentWidth / 2);

		margin:     auto;
		max-width:  $width;
		text-align: left;

		&::before, &::after {
			@include separator;

			margin:    $padding 0;
		}
	}

	#cvrNumber {
		font-weight: bold;
		margin:      auto;
		width:       fit-content;
	}

	#emailAddress {
		$width:  183;
		$height: 8;

		$actualHeight: 1em;

		aspect-ratio:     list.slash($width, $height);
		background-color: var(--textColour);
		display:          block;
		image-rendering:  pixelated;
		margin:           auto;
		mask-image:       url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALcAAAAICAQAAAAR+6a0AAAA0klEQVRIx+1W0Q4CMQhrzf3/L9eHM25zwJAzi4nyomSw0kLYEYDwtz1GQgD4cE/he4/P0MgDZHh+G+neEkWO+Ozy5dbSIsZfm5GNHesyZ76edXk0C895cP7N3lyOglwv0kbInbWYFaMV+rpqWxcC0BHOVt+tzMrh5tXEN9D5DdvkMEUdSzt7w+HMpqWiUNXIaB1EdbI4TpftZharAFzT7qqY0vRUFELGq2Tf+RlG6ekWmJgF/ymh+Zh4VK+0iOGdMZ5KgjbuK5U8XYa83dv2xz8E70XwbQlyNNhzAAAAAElFTkSuQmCC");
		mask-size:        cover;
		max-height:       $actualHeight;
		max-width:        calc($actualHeight * $width / $height);
		width:            100%;
	}

	#socials {
		display:     flex;
		font-weight: bold;
		gap:         1rem;
		margin:      auto;
		width:       fit-content;

		a {
			aspect-ratio:     1;
			background-color: var(--textColour);
			display:          block;
			image-rendering:  pixelated;
			mask-size:        cover;
			width:            2rem;

			&.instagram {
				mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAX0lEQVQ4y8VTQQ6AMAiDhfT/7+0FLy6ZBnWMLPYILYQCKicAuCRAUmVVfNFkxSMfgLcV8VjEZjr1mUkqAP+cPxW7J948ibhNivi/QNlEezrTaI0R16ZufasH1WfS6jsfuEMzS24xXK8AAAAASUVORK5CYII");
			}

			&.linktree {
				mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAU0lEQVQ4y8VTQQ4AIAgS//9nu3QrFFctNk+iIk6zHDGDwu0Q3pm24zkhZMVUAYomseOiqWCpgSqV8SEa9+6MV1ZQ3A7VxOjmIE6mSrzhS5X79I0DeIAXDaPn+ZcAAAAASUVORK5CYII");
			}

			&.threads {
				mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAeElEQVQ4y6VTMQ4AIQgDcun/38viTRolRTEyGVtogaBCAkBj/+6usgsALUs+4qfkLa+azPhf1l8sOOPurgNnytFR5hBAk6r1rIDJYyiAxva7c7bwKzOIvPltJRWC9SK2rKSgGMMYqavPrTzfQWnIN/cw1nhzzmzAP95rU0FdYvnBAAAAAElFTkSuQmCC");
			}

			&.x {
				mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAY0lEQVQ4y62SOw5AIQgEgWLvf14aX2WiPuQTpFOzm8kgAxhkjKoyObPlAIz14jxb4fkuVJwZ/BFmKCIyt+QWlhZ2laIkKltS3sJzCg5/2SLPkikt4xF2Sahn2iuRLjZnwze6D+xmTvrTiNc4AAAAAElFTkSuQmCC");
			}

			&.youTube {
				mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAARklEQVQoz6XRQQrAQAgEwZol//+yueYguhCP2gyNE1D6CRnOkIxnHG6ByJ7QQKcxz+7wgVbJp93WBNSUUJ3O309elLXU/QLhAgkk5VAXSQAAAABJRU5ErkJggg");
			}
		}
	}
}