#ABOUT-ME {
	--about-me-min-font-size: 0.5rem;
	--about-me-max-font-size: 3rem;
	--about-me-font-size: clamp(var(--about-me-min-font-size), calc(var(--view-port-min) * 4), var(--about-me-max-font-size));
	--about-me-padding: clamp(var(--about-me-min-font-size), calc(var(--view-port-min) * 3), var(--about-me-font-size));
	--about-me-border-radius: clamp(var(--about-me-min-font-size), calc(var(--view-port-min) * 10), calc(var(--about-me-font-size) * 2));
	--flex-gap-vertical: calc(var(--about-me-padding) * 0.4);
	--flex-gap-horizontal: var(--about-me-padding);
	--text-max-width: calc(var(--about-me-font-size) * 15);
	/* Shrink to avoid x-margin around text */
		--margin-x-target: calc((var(--view-port-width) - var(--text-max-width)) * 0.5 - var(--about-me-padding));
		--about-me-margin-x: var(--margin-x-target);
	display: none;  /* Controlled by */
	flex-direction: row;
	justify-content: center;
	align-items: center;
	position: fixed;
	height: 100%;
	width: 100%;
	background-color: hsla(210, 42%, 82%, 67%);
}

@media (min-aspect-ratio: 16/8) {
	#ABOUT-ME {
		--about-me-margin-x: auto;
	}
}

#ABOUT-ME_card {
	--padding-bottom: calc(var(--about-me-padding) * 1.5);
	color: white;
	background: hsl(var(--home-page-background-hsl));
	border-radius: var(--about-me-border-radius);
	padding: 0 var(--about-me-padding) var(--padding-bottom) var(--about-me-padding);
	margin-left: var(--about-me-margin-x);
	margin-right: var(--about-me-margin-x);
	--shadow-h-offset: calc(var(--about-me-font-size) * 0.2);
	--shadow-v-offset: var(--shadow-h-offset);
	--shadow-blur: calc(var(--shadow-h-offset) * 2);
	--shadow-spread: calc(var(--shadow-h-offset) * 1);
	--shadow-color:#606060;
	box-shadow: var(--shadow-h-offset) var(--shadow-v-offset) var(--shadow-blur) var(--shadow-spread) var(--shadow-color);
}

#ABOUT-ME_header {
	font-size: calc(var(--about-me-font-size) * 1.33);
	font-weight: bold;
	display: flex;
	flex-direction: row;
	align-items: center;
}

#ABOUT-ME_close {
	font-size: calc(var(--about-me-font-size) * 2.7);
	margin-left: auto;
    background-color: Transparent;
	color: inherit;
	border: none;
	cursor: pointer;
	user-select: none;
}

#ABOUT-ME_content {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
  	gap: var(--flex-gap-vertical) var(--flex-gap-horizontal);
	align-items: center;
	justify-content: center;
}

#ABOUT-ME img {
	width: calc(var(--about-me-font-size) * 8);
/* 	width: clamp(20pt, calc(var(--view-port-min) * 50), 140pt); */
}

#ABOUT-ME_text {
 	max-width: var(--text-max-width);
	font-size: var(--about-me-font-size);
}

@media(any-hover: hover) and (pointer: fine) {
	#ABOUT-ME_close:hover {
		--text-shadow-hover-hsl: 0, 100%, 68%;
		--blur-radius: var(--about-me-font-size) * 0.1;
		--text-shadow-hover:	0 0 calc(var(--blur-radius) *  1) hsl(var(--text-shadow-hover-hsl)),
								0 0 calc(var(--blur-radius) *  2) hsl(var(--text-shadow-hover-hsl)),
								0 0 calc(var(--blur-radius) *  4) hsl(var(--text-shadow-hover-hsl)),
								0 0 calc(var(--blur-radius) *  6) hsl(var(--text-shadow-hover-hsl)),
								0 0 calc(var(--blur-radius) *  8) hsl(var(--text-shadow-hover-hsl));
		text-shadow: var(--text-shadow-hover);
	}
}