@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Oxygen:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
@import "./vars.css";

:root {
	--container-padding-x: 5%;
}
/* ========= RESET & BASE ========= */
*, *::before, *::after {
	box-sizing: border-box;
}
*:not(code) {
	font-family: "Figtree", sans-serif, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, "Apple Color Emoji", "Segoe UI Emoji";
	/* font-family: "Open Sans", sans-serif;
	font-family: "Noto Sans", sans-serif;
	font-family: "Nunito", sans-serif;
	font-family: "Oxygen", sans-serif;
	font-family: "Instrument Sans", sans-serif;
	font-variation-settings: "wdth" 100; */
	font-family: "Figtree", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
}
b, strong {letter-spacing: .2px;}
/* .fa-solid, .fa-regular, .fa-brands, .fa-classic, .fas, .far, .fab, .fal, .fat, .fad, .fadr, .fadl, .fadt, .fass, .fasr, .fasl, .fast, .fasds, .fasdr, .fasdl, .fasdt, .faslr, .faslpr, .fawsb, .fatl, .fans, .fands, .faes, .fajr, .fajfr, .fajdr, .facr, .fausb, .faudsb, .faufsb, .fa-solid, .fa-semibold, .fa-regular, .fa-light, .fa-thin, .fa-brands, .fa-classic, .fa-duotone, .fa-sharp, .fa-sharp-duotone, .fa-chisel, .fa-etch, .fa-jelly, .fa-jelly-duo, .fa-jelly-fill, .fa-notdog, .fa-notdog-duo, .fa-slab, .fa-slab-press, .fa-thumbprint, .fa-utility, .fa-utility-duo, .fa-utility-fill, .fa-whiteboard, .fa {font-family: "Font Awesome 7 Pro";} */
html, body {height: 100%;}
body {
	background: radial-gradient(1200px 800px at 80% -10%, rgba(109, 142, 255, 0.18), transparent 50%),
							radial-gradient(900px 600px at -10% 20%, rgba(109, 142, 255, 0.12), transparent 40%),
							radial-gradient(1200px 800px at 80% 110%, rgba(109, 142, 255, 0.18), transparent 50%),
							radial-gradient(900px 600px at -10% 80%, rgba(109, 142, 255, 0.12), transparent 40%),
							var(--bg1);
	background-attachment: fixed;
	color: var(--text1);
	line-height: 1.6;
	margin: 0;
}
img {display:inline-block;max-width:100%;height:auto;}
a {color:inherit;text-decoration:none;}
a:hover {color:var(--text1);cursor:pointer;}
code {
	border: 1px solid var(--border);
	border-color: var(--border2);
	border-radius: .25em;
	font-family: 'Courier New', Courier, monospace;
	font-weight: normal;
	margin: 0 .2rem;
	padding: .1rem 0.35rem;
	vertical-align: baseline;
}
.no-border {border:none!important;}

/* ========= MAIN NAV ========= */
.global-nav {
	background: var(--bg1);
	border-bottom: 1px solid var(--border2);
	padding: 1.5rem var(--container-padding-x);
	position: sticky;
	top: 0;
	z-index: 100;
}
.global-nav .container {
	display: flex;
	flex-flow: row;
	align-items: center;
	justify-content: space-between;
}
.logo { display:flex; gap:.5rem; align-items: center; font-weight: 800; font-size: 1.5rem; color: var(--primary); }
.logo i {
	background: white;
	border-radius: 6px;
	color: var(--interactive);
	padding: 6px;
	width: auto;
}
.global-nav .nav-links {
	display: flex;
	flex-flow: row;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;

	position: relative;
}
#nav-trigger {
	border-radius: 8px;
	cursor: pointer;
	color: var(--primary-bold);
	display: inline-flex;

	font-size: 1.4rem;
	align-self: stretch;
	justify-content: center;
	align-items: center;
	min-width: 28px;
}
#nav-trigger .fa-times {display:none;}
#nav-trigger.open i {display:none;}
#nav-trigger.open .fa-times {display:inline;}
.global-nav ul {
	list-style: none;
	display: none;
	gap: .5rem;
	margin: 0;
	padding: 0;
}
.global-nav .open + ul {
	backdrop-filter: blur(8px);
	background-color: rgba(225, 225, 225, 0.6);
	border-radius: 20px;
	box-shadow: var(--shadow);

	display:flex;
	flex-flow:column;
	gap: 0;
	justify-content:flex-end;

	padding: 1rem;
	min-width: 170px;

	position: absolute;
	top: calc(100% + 0.75rem);
	right: -.75rem;
	left: auto;
	z-index:2;
}
.global-nav li a {
  display: block;
  border-radius: 8px;
  padding: 0.35rem .5rem;
	text-align: right;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}
.global-nav li a:hover {
  background-color: var(--bg2);
}
.logged-in button {all:inherit;width:-webkit-fill-available;}
@media(min-width:1024px) {
	#nav-trigger {display: none;}

	.global-nav ul, .global-nav .open ul {display:flex;position:unset;}
	.global-nav li {display:inline-block;}
	.global-nav li a {
		display: inline-block;
		padding: 0.15rem .5rem;
		text-align: unset;
	}
	.logged-in form {display:inline;}
}

.container {
	width: min(100% - 2rem, var(--container));
	margin-inline: auto;
}

.pill {
	background: linear-gradient(180deg, var(--gradient-start), var(--gradient-end));
	border: 1px solid var(--border);
	border-radius: 100px;
	color: var(--muted);
	font-size: .875rem;

	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .35rem .75rem;
}

/* ========= LEGAL ========= */
.legal,
body:has(#legal) .global-nav .container,
body:has(#legal) #global-footer .container {
	max-width: 800px;
	margin: 0 auto;
}
.legal {padding: 3em 0;}
.legal h1 { font-size: 2.6em; }
.legal section { padding-top: 2rem; }
.legal section:first-child {
	font-size: 1.2em;
	padding: 2em 0;
}
@media (min-width: 1100px) {
	.legal,
	body:has(#legal) .global-nav .container,
	body:has(#legal) #global-footer .container {
		max-width: 1400px;
		margin: 0 auto;
	}
	.legal section[id] {
		border-top: 1px solid var(--border2);
		padding: 3rem 0 3rem 30%;
		position: relative;
	}
	.legal section h2 {
		position: absolute;
		left: 0;
		top: 3rem;
		max-width: calc(30% - 20px);
		margin-top: 0;
		padding-right: 20px;
	}
	.legal section h2 + h3 {
		margin-top: 0.4rem;
	}
	.legal ol { padding-left: 0; margin-left: -0.5rem; }
	.legal ol li { padding-left: 0.5rem; }
}
/* ========= FOOTER ========= */
#global-footer {padding:4rem var(--container-padding-x);}
footer {
	font-size: .9rem;
	background-color: var(--bg1);
	border-top: 1px solid var(--border2);
	color: var(--text2);
	font-size: 0.9rem;
	text-align: center;
}
footer .container {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	gap:1rem;
}