@media screen and (min-width: 1000px) {
	h2.heart-before {
		text-indent: -3.5rem;
	}
}

/* variables */
:root {
	--bg-color: #24273a;
	--text-color: #eed49f;
	--subtitle-color: #f4dbd6;
	--link-color: #f5bde6;
	--nav-text-color: #ee99a0;
	--heart-color: #c6a0f6;
	--contact-color: #c6a0f6;
	--section-color: #c6a0f6;
	--pronoun-color: #f0c6c6;
	--ipa-color: #f4dbd6;

	--transition-timing: .5s;

	/* pride colors (default: trans) */
	--pride-0: #5bcffa;
	--pride-1: #F5abb9;
	--pride-2: #ffffff;
	--pride-3: #F5abb9;
	--pride-4: #5bcffa;
	--pride-5: #000000;
}

/* global */
body {
	background-color: var(--bg-color);
	color: var(--text-color);
	font-family: 'Fira Code', monospace;

	margin: 0; /* keeps pride flag filling entire space */
}
::selection {
	background-color: var(--text-color);
	color: var(--bg-color);
}
a {
	color: var(--link-color);
}

.path {
	color: var(--link-color);
}
.path, .nav-path {
	opacity: 0;
	font-style: italic;
	height: 100%;
	padding-right: .2em;
}

main a:hover, a:hover + .path {
	color: var(--bg-color);
	background-color: var(--link-color);
	opacity: 100%;
	transition:
		color var(--transition-timing),
		background-color var(--transition-timing);
}

/* pride flag */
.pride {
	display: grid;
	height: 2.5rem;
}
.pride > div:nth-child(1) {
	background-color: var(--pride-0);
}
.pride > div:nth-child(2) {
	background-color: var(--pride-1);
}
.pride > div:nth-child(3) {
	background-color: var(--pride-2);
}
.pride > div:nth-child(4) {
	background-color: var(--pride-3);
}
.pride > div:nth-child(5) {
	background-color: var(--pride-4);
}
.pride > div:nth-child(6) {
	background-color: var(--pride-5);
	/* default is trans, so hide 6th */
	display: none;
}

/* nav */
/* TODO: the nav annoys me endlessly because i committed to the fucking paths bit lol */
.nav-bar {
	color: var(--nav-text-color);
	font-size: 1.5rem;
	list-style: none;

	display: grid;
	grid-template-columns: repeat(3, 20%);
	gap: 1em;

	justify-content: center;
	margin-block: 1rem;
}
.nav-link a {
	color: inherit;
	text-decoration: none;
}

.nav-link a:hover, .nav-link a:hover + .nav-path {
	color: var(--bg-color);
	opacity: 100%;
	background-color: var(--nav-text-color);
	transition:
		color var(--transition-timing),
		background-color var(--transition-timing);
}

/* main content */
main {
	text-align: center;
	max-width: 850px;
	margin: auto;
}
h2 {
	text-align: left;
	font-size: 1.3rem;
}
h3 {
	font-size: 1.3rem;
	text-decoration: underline;
}

p {
	text-align: left;
	text-indent: 2em;
	margin-bottom: 2em;
}

p + ul {
	margin-top: -1.5rem;
	margin-left: 1.5rem;
}

li {
	text-align: start;
}

/* footer */
footer {
	font-size: .7rem;
	background-color: var(--bg-color);
	text-align: center;
	margin-block: 10rem .6rem;
}

.page-title {
	margin-bottom: .1rem;
}

.page-subtitle {
	color: var(--subtitle-color);
	margin-bottom: 1.9rem;
}

.section {
	color: var(--section-color);
}

.pronouns {
	color: var(--pronoun-color);
	font-size: .7em;
	vertical-align: super;
	font-style: italic;
}

.ipa {
	font-family: 'Courier New', Courier, monospace;
	color: var(--ipa-color);
}

/* i considered using margins instead of two different selectors with different spaces but i think it would prob look better inline like this -morgan 2023-03-30*/
.heart-wrap::before, .heart-before::before {
	content: '❤ ';
	color: var(--heart-color);
}
.heart-wrap::after, .heart-after::after {
	content: ' ❤';
	color: var(--heart-color);
}

.center {
	text-align: center;
	text-indent: 0;
}
.center-children > * {
	text-align: center;
}

.contact-method {
	color: var(--contact-color);
}