html{
	background: transparent !important;
}

body{
	min-height: 100vh;
	background:
		radial-gradient(circle at 12% 10%,
			rgba(120,190,255,0.28) 0%,
			rgba(120,190,255,0.00) 28%
		),
		radial-gradient(circle at 82% 18%,
			rgba(150,130,255,0.20) 0%,
			rgba(150,130,255,0.00) 26%
		),
		radial-gradient(circle at 50% 100%,
			rgba(70,150,255,0.18) 0%,
			rgba(70,150,255,0.00) 36%
		),
		linear-gradient(180deg,
			#d9e8f8 0%,
			#cfe1f4 20%,
			#c6dbf1 42%,
			#bfd6ee 65%,
			#b8d1ec 100%
		) !important;
	background-attachment: fixed !important;
}

/* very subtle texture */
body::before{
	content:"";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: -1;
	opacity: .18;
	background-image:
		linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
	background-size: 32px 32px, 32px 32px;
	mix-blend-mode: soft-light;
}

.topbar{
	background: linear-gradient(to bottom, rgba(255,255,255,.52), rgba(255,255,255,.14)) !important;
}

.card,
.input,
.select,
.select.compact,
.customSelect{
	background: rgba(255,255,255,.44) !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.footerLinks{
	background: rgba(255,255,255,.24) !important;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.footerLink{
	background: rgba(255,255,255,.30) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

@media (prefers-color-scheme: dark){
	body{
		background:
			radial-gradient(circle at 12% 10%,
				rgba(70,140,255,0.22) 0%,
				rgba(70,140,255,0.00) 28%
			),
			radial-gradient(circle at 82% 18%,
				rgba(125,100,255,0.16) 0%,
				rgba(125,100,255,0.00) 26%
			),
			radial-gradient(circle at 50% 100%,
				rgba(50,120,255,0.14) 0%,
				rgba(50,120,255,0.00) 36%
			),
			linear-gradient(180deg,
				#0b1524 0%,
				#0d192b 22%,
				#0f1d31 44%,
				#102033 68%,
				#0f1b2c 100%
			) !important;
	}

	body::before{
		opacity: .14;
		background-image:
			linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
			linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
	}

	.topbar{
		background: linear-gradient(to bottom, rgba(10,14,24,.46), rgba(10,14,24,.12)) !important;
	}

	.card,
	.input,
	.select,
	.select.compact,
	.customSelect{
		background: rgba(15,20,32,.42) !important;
	}

	.footerLinks{
		background: rgba(15,20,32,.30) !important;
	}

	.footerLink{
		background: rgba(255,255,255,.08) !important;
	}
}

@media (max-width: 1024px){
	body{
		background-attachment: scroll !important;
	}
}