* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

body, html { padding: 0; margin: 0; width: 100%; }
body {
	--border-width: 4px;
	--border-color: var(--dd-purple);
	font-size: 1.25rem;
	background-color: var(--d-purple);
	background-image: url('/graphix/bg/rainbow-paw-stars.png');
	background-size: min(400px, 70vw, 70vh);
	overflow-x: hidden;
}

.bg {
	position: fixed; z-index: -1;
	width: 550px; height: 120vh;
	top: 0; left: 50%; transform: translate(-50%, 0);
	background-color: var(--purple);
	box-shadow: 0 0 1em 1em var(--purple);
	opacity: .3;
}
.blend-lighten { mix-blend-mode: overlay; }
@media screen and (width <= 650px) { .bg { width: 100%; } }

body > header { text-align: center; width: max(27em,min(40em,75vw)); margin: 0 auto -.5em auto; }
body > header .banner .text h1 {
	font-family: 'Super Comic', 'Comic Sans MS', sans-serif;
	font-weight: normal; font-size: min(1.25em, 2.5vw);
	letter-spacing: .1em;
	line-height: 1.25;
	margin: 0;
}
@media screen and (width <= 800px) {
	body > header { margin-bottom: 0; width: 100%; }
	body > header .banner .wrapper { display: none; /* triangle cutout ends hidden on small screens */ }
	body > header .banner .text { height: auto; }
	body > header .banner .text h1 { font-size: max(1.25rem,4vw); }
}

p { margin: .5em 0; }

.btn, .btn:link, .btn:visited { font-size: 1.5rem; }

/******************** page settings button ********************/
.page-settings { position: absolute; }
button.open-page-settings { background: var(--l-green); border: var(--border-width) var(--green) solid; padding: .2em; }
button.open-page-settings svg { fill: var(--d-blue); stroke: var(--d-blue); }

/*****************************************************************************/
/****************************** IDENTITY BOX **********************************/
/*****************************************************************************/

.identity {
	display: flex; justify-content: center; align-items: center;
	margin: 1em 0;
}

.identity > .box {
	z-index: 1;
	min-width: min(28rem, 65vw); max-width: min(28rem, 70vw);
}
.identity > .box > header {
	display: flex; flex-wrap: wrap; align-items: center;
	padding: .4em 1em .1em 1em;
	background: var(--green);
	border: var(--border-width) var(--border-color) solid; border-radius: 1em 1em 0 0;
	border-bottom: none;
}
.identity > .box > header > *:not(.ears) { z-index: 10; }

/* header icon */
.identity .icon {
	border-radius: 100%;
	height: 4em;
}
/* header name */
.identity > .box > header h2 {
	font-family: 'Super Comic', 'Comic Sans MS', sans-serif;
	font-weight: normal;
	color: var(--d-blue);
	--text-shadow-color: var(--l-green);
	margin: 0;
}
/* pronouns under name */
.identity .pronouns {
	margin: 0 0 .5em 0; line-height: 1;
	font-size: inherit;
	--text-shadow-color: var(--l-green);
}
/* header bottom border (necessary to avoid angled edge) */
.identity > .box > header .border-bottom {
	width: 200%; margin: 0 -1em calc(-1*var(--border-width)) -1em;
	border-bottom: var(--border-width) var(--d-green) solid;
}
/* wide screen header layout */
@media screen and (width >= 450px) {
	/* header text area (name/pronouns) */
	.identity > .box > header .text { margin: 0 .75em; }
	/* icon outline */
	.identity div:has(> .icon-back) { display: none; }
}
/* narrow screen header layout */
@media screen and (width < 450px) {
	body > header { margin-bottom: 0; }
	.identity:has(.icon) { margin-top: 2.75em; }
	.identity > .box > header > * { width: 100%; text-align: center; }
	.identity .icon { margin-top: -3em; }
	.identity:has(.icon) > .box > header > .text { margin-top: -.5em; }
	/* icon outline */
	.identity div:has(> .icon-back) { z-index: -1 !important; }
	.identity .icon-back {
		height: calc(4em + var(--border-width)*2); aspect-ratio: 1/1;
		margin: calc(-4em - var(--border-width)*2.5) auto 0 auto;
		background: var(--border-color); border-radius: 100%;
	}
}

.identity > .box > .body {
	padding: .25em 1.5em; color: var(--d-orange);
	border-radius: 0 0 1em 1em;
	background: var(--l-green);
	border: var(--border-width) var(--border-color) solid; border-top: none;
}
.identity > .box > .text > :last-child { margin-bottom: 0; }
.identity > .box p + ul { margin-top: -.5em; }

/******************** box top ears ********************/
.identity > .box .ears { position: relative; width: 100%; top: calc(-.5*var(--border-width) - .5em); margin: 0 auto; }
.identity > .box .ears div {
	position: absolute;
	transform: translate(0,-67%); width: 15%; aspect-ratio: 1/1;
	rotate: 45deg;
	border-radius: 20% 0 0 0;
	border: var(--border-width) var(--border-color) solid; border-right: none; border-bottom: none;
	background: var(--green);
}
.identity > .box .ears > :last-child { right: 14%; }

/*****************************************************************************/
/******************************** RIBBONS ************************************/
/*****************************************************************************/

/* banner ribbons */
.banner { display: flex; justify-content: center; width: 100%; margin: 0 auto; }
.banner .text { flex: 1; height: 3em; font-size: 1.25rem; margin: 0; padding: .5em; }

/* ribbons area */
.ribbons {
	--triangle-width: 1.25em;
	display: flex; flex-direction: column;
}
.identity .ribbons { padding-top: 4em; }
@media screen and (width <= 52rem) { .identity .ribbons { max-width: var(--triangle-width); } }
@media screen and (width > 52rem) { .identity .ribbons { min-width: 9em; } }
.identity .ribbons.left { align-items: end; } .identity .ribbons.right { align-items: start; }

/* individual ribbon */
.wrapper:has(> .ribbon) {  }
.ribbon {
	position: relative;
	transition: left .5s, right .5s;
	@media (prefers-reduced-motion: reduce) { transition: left 0s, right 0s; }
	padding: .3em 0;
	font-size: 1.5rem;
}
.ribbon, .banner .text {
	--text-shadow-color: var(--border-color);
	--text-shadow-2px: 
		-1px -1px 0 var(--text-shadow-color), 1px -1px 0 var(--text-shadow-color), -1px 1px 0 var(--text-shadow-color), 1px 1px 0 var(--text-shadow-color),
		-2px 0 0 var(--text-shadow-color), 2px 0 0 var(--text-shadow-color), -2px 0 0 var(--text-shadow-color), 2px 0 0 var(--text-shadow-color),
		0 -2px 0 var(--text-shadow-color), 0 -2px 0 var(--text-shadow-color), 0 2px 0 var(--text-shadow-color), 0 2px 0 var(--text-shadow-color),
		-2px -1px 0 var(--text-shadow-color), 2px -1px 0 var(--text-shadow-color), -2px 1px 0 var(--text-shadow-color), 2px 1px 0 var(--text-shadow-color),
		-1px -2px 0 var(--text-shadow-color), 1px -2px 0 var(--text-shadow-color), -1px 2px 0 var(--text-shadow-color), 1px 2px 0 var(--text-shadow-color),
		-2px -2px 0 var(--text-shadow-color), 2px -2px 0 var(--text-shadow-color), -2px 2px 0 var(--text-shadow-color), 2px 2px 0 var(--text-shadow-color);
	color: white;
	text-shadow: var(--text-shadow-2px);
}

.left .ribbon { text-align: left; padding-left: var(--triangle-width); }
.identity .left .ribbon { right: calc(-100% + var(--triangle-width)*1.4); }
.right .ribbon { text-align: right; padding-right: var(--triangle-width); }
.identity .right .ribbon { left: calc(-100% + var(--triangle-width)*1.4); }

@media screen and (width > 700px) {
	.identity .ribbon:is(:hover,:focus-visible) {
		transition: left .3s, right .3s;
		@media (prefers-reduced-motion: reduce) { transition: left 0s, right 0s; }
	}
	.identity .left .ribbon:is(:hover,:focus-visible) { right: 0; } .identity .right .ribbon:is(:hover,:focus-visible) { left: 0; }
}

.ribbon > .wrapper, .banner .text {
	border: var(--border-width) var(--border-color) solid; border-right: none; border-left: none;
	background: var(--border-color); background-blend-mode: lighten;
	background-size: 100% 100%;
	image-rendering: pixelated; /* keep background images sharp when scaled */
}
.ribbon > .wrapper { height: 2.5em; line-height: 1em; }
.identity .ribbon > .wrapper { padding: .5em 1em; }
.banner .ribbon > .wrapper { padding: .5em; }
@media screen and (width <= 700px) {
	.identity .ribbon > .wrapper { width: .5em; padding: .5em 0; }
	.ribbon > .wrapper span { display: none; }
}

/* triangle shapes */
.ribbon > .wrapper::after {
	content: '';
	display: block; position: absolute; top: .3em;
	height: calc(100% - 8px - .6em); width: var(--triangle-width);
	background: inherit; background-blend-mode: inherit; border: inherit;
}
.left .ribbon > .wrapper::after { left: 2px; clip-path: polygon(0 0, 98% 0, 98% 100%, 0 100%, 98% 50%); }
.right .ribbon > .wrapper::after { right: 2px; clip-path: polygon(2% 0%, 100% 0%, 2% 50%, 100% 100%, 2% 100%); }

/* angled edge borders - ::after is top, ::before is bottom */
.ribbon::after, .ribbon::before {
	content: '';
	z-index: 1;	display: block; position: absolute;
	width: auto; height: 55.75%;
}
.left .ribbon::after, .left .ribbon::before {
	left: calc(4*var(--border-width)); border-left: var(--border-width) var(--border-color) solid;
}
.right .ribbon::after, .right .ribbon::before {
	right: calc(4*var(--border-width)); border-right: var(--border-width) var(--border-color) solid;
}
.ribbon::after { top: -1%; border-top: var(--border-width) transparent solid; }
.ribbon::before { bottom: -1%; border-bottom: var(--border-width) transparent solid; rotate: 45deg; }
.left .ribbon::after, .right .ribbon::before { rotate: -45deg; }
.right .ribbon::after, .left .ribbon::before { rotate: 45deg; }

/* specific ribbon backgrounds */
.autigender-ribbon > .wrapper, .autigender-ribbon.text { background-image: url('/graphix/flags/autigender-blank.png'); }
.catgender-ribbon > .wrapper { background-image: url('/graphix/flags/catgender-blank.png'); }
.agender-ribbon > .wrapper { background-image: url('/graphix/flags/agender.png'); }
.boygirl-ribbon > .wrapper { background-image: url('/graphix/flags/boygirl.png'); }
.trans-ribbon > .wrapper { background-image: url('/graphix/flags/transgender.png'); }
.transmasc-ribbon > .wrapper { background-image: url('/graphix/flags/transmasculine.png'); }

.aroace-ribbon > .wrapper { background-image: url('/graphix/flags/aroace.png'); }
.asexual-ribbon > .wrapper { background-image: url('/graphix/flags/asexual.png'); }
.aromantic-ribbon > .wrapper { background-image: url('/graphix/flags/aromantic.png'); }
.mlm-ribbon > .wrapper { background-image: url('/graphix/flags/vincian.png'); }
.queer-ribbon > .wrapper { background-image: url('/graphix/flags/queer.png'); }
.polyam-ribbon > .wrapper { background-image: url('/graphix/flags/polyamorous-blank.png'); }

.system-ribbon > .wrapper { background-image: url('/graphix/flags/system-pride.png'); }