/* THIS IS GONNA BE _THE_ FILE THAT MAKES STUFF LOOK CORRECT, COLORS ELSEWHERE */

@font-face
{
	font-family:	HackedKerX;
	font-display:	swap;
	src:			url(//static.hedgehosting.net/css/Hacked-KerX.woff2);
}

*
{
	text-align:	center;
}

html
{
	scroll-behavior:	smooth;
}

body
{
	max-width:	95vw;
	margin:		1vh auto;
	font-family:	var(--font-sans);
	color:		var(--fg-primary);
	background:	var(--bg);

	display:	flex;
	flex-direction:	column;
	gap:		40px;
	align-items:	center;
}

a
{
	color:			inherit;
	text-decoration:	none
}

img.logo
{
	left:		-210px;
	top:		105px;
	width:		150px;
	height:		8rem;
	position:	relative;
}

footer
{
	width:			95vw;
	margin-top:		8px;
	font-size:		11px;
	display:		flex;
	justify-content:	space-between;
	padding:		6px 2px 0;
	border-top:		1px solid #0f172ae6;
}

.hero
{
	border-radius:	var(--hero-radius);
	background:	var(--hero-bg);
	border:		1px solid #94a3b88c;
}

.hero-sub
{
	width:		100%;
	font-size:	1.2em;
	font-style:	italic;
	line-height:	1.6;
	max-width:	520px;
	align-self:	center;
	display:	contents;
}

.hero-title span:nth-of-type(2)
{
	color:	var(--fg-primary);
}

@media only screen and (min-width:651px)
{
	header, section
	{
		max-width:	600px;
		width:		600px;
		text-align:	center;
	}
}

@media only screen and (max-width:400px)
{
	img.logo
	{
		left:	0;
		top:	0;
		margin:	0 auto;
	}
}

@media only screen and (max-width:650px)
{
	img.logo
	{
		left:	-130px;
		top:	70px;
		height:	5rem;
	}

	header h1
	{
		font-size:	clamp(32px, 6vw, 52px);
		line-height:	1;
		letter-spacing:	-.08em;
	}

}

input {
	border:		1px solid #ccc;
	border-radius:	6px;
	transition:	border-color 0.2s, box-shadow 0.2s;
}

input + span
{
	padding-right:	30px;
}

input:focus {
	border-color:	#009000;
	box-shadow:	0 0 0 2px rgba(0,144,0,0.2);
	outline:	none;
}

input:invalid + span::after,
input:valid + span::after
{
	position:	absolute;
	right:		10px;
	top:		50%;
	transform:	translateY(-50%);
}
input:invalid + span::after
{
	content:	"✖";
	color:		var(--error-color);
}
input:valid + span::after
{
	content:	"✓";
	color:		--success-color;
}
input:placeholder-shown + span::after
{
	content:	"";
}

.hidden-field label,
.hidden-field input
{
	position:	absolute;
	left:		-789235px;
}
textarea
{
	min-height:	90px;
}
input, textarea
{
	color:		#e5e7eb;
	border-radius:	12px;
	border:		1px solid #1f2937e6;
	padding:	8px 10px;
	font:		inherit;
	background:	#0f172af2;
}

.btn-primary
{
	border-radius:	var(--radius-pill);
	padding:	10px 18px;
	cursor:		pointer;
	background:	linear-gradient( 135deg, #22c55e, #4ade80 );
	font-weight:	600;
}

input.btn-primary[type="submit"]
{
	float:	right;
}

.field
{
	position:	relative;
	display:	grid;
	gap:		4px;
	font-size:	18px;
}
.field label
{
	color:	#d1d5dbf2;
}

section, header
{
	border-radius:	22px;
	background:	radial-gradient(
		circle at top left,
		#0f172ae6,
		#020617
	);
	border:		1px solid #0f172af2;
}
section
{
	display:	flex;
	flex-direction:	column;
}

.error
{
	color:		var(--error-color);
	font-weight:	700;
}