* { box-sizing: border-box }
body { margin: 0; padding: 0; font-family: sans-serif; }
nav { margin: 0 auto 2rem auto; width: fit-content; }
main, footer { width: min(960px, 95vw); margin: 0 auto }
small { font-size: 60%; opacity: 70% }
p { margin: 1rem 0 0.5rem 0 }
p + ul, p + ol { margin-top: 0 }
hr { border-color: #eee }
p, li, a { font-weight: 300 }

header > h1 {
	font-family: Birthstone;
	font-size: 5rem;
	text-align: center;
}

.bi {
	background: linear-gradient(120deg, #d60270 40%, #9b4f96 50%, #0038a8 80%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.nav-button {
	background-color: #c47d;
	border-radius: 2rem;
	padding: 1rem 1.5rem;
	margin: 0 0.5rem;
	color: #eee;
	font-size: 1.5rem;
	text-decoration: none;
}

.nav-button:hover, .nav-button:active, a>.link-bubble:hover, a>.link-bubble:active {
	filter: drop-shadow(8px 8px 10px black);
	transition: 200ms;
}

.nav-button.active {
	font-weight: bold;
	background-color: #c47;
}

.link-bubble {
	background-color: #626d;
	border-radius: 2rem;
	margin: 1rem 0;
	padding: 1rem 1.5rem;
	color: #eee;
	text-align: center;
	font-size: 1.5rem;
	font-weight: 300;
	display: block;
}

.bubble {
	border-radius: 2rem;
  padding: 1rem 1.5rem;
	color: #eee;
	font-size: 1.5rem;
}

.bubble > p:first-of-type { margin-top: 0 }
.bubble > p:last-of-type { margin-bottom: 0 }

.blue {
	background-color: #226d;
}

a:not(.link-plain), a:not(.link-plain):visited {
	color: #aad;
}

a.link-plain {
	color: #eee;
	text-decoration: none;
}

.self-portrait {
	max-width: 100%;
	border-radius: 2rem;
	margin: 1rem auto;
	display: block;
}

.if-hidden {
	width: 0;
	height: 0;
	border: 0;
}

.pr2 { padding-right: 0.25rem; } 

#bg {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	position: fixed;
	z-index: -69;
	top: 0;
}

#genderfluid {
	width: 100vw;
	height: 100vh;
	position: fixed;
}

#bi-poly-heart {
	height: min(calc(95vw*360/500),60vh);
	position: absolute;
	display; block;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}