path: root/css/footer.scss

@use "sass:list";

#footer {
	background-color:        var(--foregroundColour);
	border-top-left-radius:  $padding;
	border-top-right-radius: $padding;
	font-family:             $monospaceFont;
	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/AAAAS0lEQVQoz9WRMQ4AIAgDW+P/v1xHIKIRNhlpuQYgmqWG4nVBqVObL+fGvtHu85YpYDgcnzamB87A3fNCMEFlQXG4cO55vEz1H//VAg5FJOyjOJa9AAAAAElFTkSuQmCC");
		mask-size:        cover;
		max-height:       $actualHeight;
		max-width:        calc($actualHeight * ($width / $height));
	}

	#systemDescription {
		font-style:      italic;
		margin:          $padding auto;
		max-width:       calc($contentWidth / 2);
		text-align:      justify;
		text-align-last: center;
	}

	#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");
			}
		}
	}
}