body, html {
	width: 100%; height: 100%; margin: 0;
	background: var(--d-purple);
	background-image: url('/graphix/bg/rainbow-paw-stars.png');
	background-size: min(400px, 50vw, 50vh);
}

body {
	text-align: center;
	font-family: 'Yet R', sans-serif;
	--border-width: .25rem;
	--border-color: var(--dd-purple);
}

a, a:link, a:visited { color: var(--d-blue); }
a:hover { color: var(--purple); }

.main-container {
	width: min(100%, 500px);
	margin: 0 auto;
	background: var(--l-green);
	color: var(--blue);
	height: 100%;
	display: flex;
	flex-direction: column;
	border: var(--border-width) var(--border-color) solid;
	border-top: none; border-bottom: none;
}

.username-header {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .5rem;
	background: var(--blue);
	color: var(--white);
}

.pink {
	.username-header, .btn-default { background: var(--pink); }
	.btn-default:hover { background: var(--l-pink); }
}
.orange {
	.username-header, .btn-default { background: var(--d-orange); }
	.btn-default:hover { background: var(--orange); }
}
.green {
	.username-header, .btn-default { background: var(--d-green); }
	.btn-default:hover { background: var(--green); }
}
.blue {
	.username-header, .btn-default { background: var(--blue); }
	.btn-default:hover { background: var(--l-blue); }
}
.purple {
	.username-header, .btn-default { background: var(--purple); }
	.btn-default:hover { background: var(--l-purple); }
}
.username-header #icon {
	height: 4em;
	max-width: 4em;
	flex-shrink: 1;
}
.username-header .text {
	flex-shrink: 0;
	text-align: left;
}
h1 {
	font-size: 2em;
	margin: 0;
}
#pronouns {
	font-style: italic;
	margin-top: -.2em;
}

nav {
	padding: .5em 0;
	width: 100%;
}

#summary {
	position: relative;
}
#summary, #edit-summary {
	min-height: max(2em,min(40vh,400px));
}
#summary .text {
	max-height: 100%;
	overflow-y: scroll;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
#summary .text, #edit-summary {
	width: 100%;
	padding: .75em 1em;
	height: auto;
}
#summary, #edit-summary-form {
	flex-grow: 1;
	width: 100%;
	text-align: left;
}
#summary.empty {
	font-style: italic;
}

#edit-summary-button {
	display: block;
	position: absolute;
	@media screen and (width >= 550px) { right: -20px; top: -10px; }
	@media screen and (width < 550px) { right: 5px; top: 5px; }
	background: var(--white);
	border-radius: 50%;
	font-size: 1.25rem;
	padding: .25em;
	--btn-shadow-size: .13em;
	box-shadow: var(--btn-shadow-size) var(--btn-shadow-size) var(--d-blue);
  margin-bottom: var(--btn-shadow-size);
}
#edit-summary-button:active {
	box-shadow: none;
	transform: translate(var(--btn-shadow-size) var(--btn-shadow-size));
}
#edit-summary {
	font-family: inherit;
	border: none;
	resize: none;
	height: auto;
	color: var(--d-blue);
	font-size: inherit;
}
#edit-summary:focus, #edit-summary:active { outline: 3px var(--d-blue) solid; }
#summary, #edit-summary-form {
	.btn { margin-top: 10px; }
}
#edit-summary-form .links, #edit-summary-form .buttons {
	text-align: center;
}
#edit-summary-form .links {
	a, a:link, a:visited {
		color: var(--d-blue);
	}
	a:hover, a:focus-visible {
		color: var(--purple);
		text-decoration: underline;
	}
	margin-top: .5em;
}