:root {
	--primary: #1758f1;
	--secondary: #37dbe0;
	/* Light Theme */
	--font: #4b5062;
	--base: #ffffff;
	--transparent-base: rgba(255, 255, 255, 0.5);
	--body-bg: #f2f3fd;
	--body-bg-gradient: linear-gradient(45deg, #f8fafe, #f2f3fd);
	--inset-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.1), inset -3px -3px 8px rgba(255, 255, 255, 0.8);
	--shadow: 3px 3px 6px rgba(0, 0, 0, 0.1), -3px -3px 6px rgba(255, 255, 255, 0.5);
	--input-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.1), inset -3px -3px 6px rgba(255, 255, 255, 0.8), inset -60px 0px 30px -30px rgba(0, 0, 0, 0.01), inset 60px 0px 30px -30px rgba(255, 255, 255, 0.1);
	--btn-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1), -3px -3px 6px rgba(255, 255, 255, 0.8), inset -60px 0px 30px -30px rgba(0, 0, 0, 0.01), inset 60px 0px 30px -30px rgba(255, 255, 255, 0.1);
	/* Dark Theme (toggled in ThemeToggle) */
	/* --font: #ffffff;
	--base: #333333;
	--transparent-base: rgba(51, 51, 51, 0.5);
	--body-bg: #212121;
	--body-bg-gradient: linear-gradient(45deg, #282828, #212121);
	--inset-shadow: inset 3px 3px 6px #171717, inset -3px -3px 8px #333333;
	--shadow: 3px 3px 6px #171717, -3px -3px 6px #333333;
	--input-shadow: inset 2px 2px 3px #171717, inset -3px -3px 6px #333333, inset -60px 0px 30px -30px rgba(0, 0, 0, 0.01), inset 60px 0px 30px -30px rgba(31, 31, 31, 0.1);
	--btn-shadow: 2px 2px 3px #171717, -3px -3px 6px #333333, inset -60px 0px 30px -30px rgba(0, 0, 0, 0.01), inset 60px 0px 30px -30px rgba(31, 31, 31, 0.1); */
}
body {
	background-image: var(--body-bg-gradient);
	color: var(--font);
	font-family: 'Noto Sans', sans-serif;
	margin: 0;
	padding: 0;
	min-width: 768px;
	min-height: 100vh;
}
h1, h2, h3, h4 {
	font-weight: 400;
	color: var(--font);
}
p {
	margin: 0;
}
input, .well {
	font-size: 18px;
	border: none;
	border-radius: 50px;
	padding: 0.5rem 1.5rem;
	background-color: var(--body-bg);
  color: var(--font);
	box-shadow: var(--input-shadow);
}
input:focus {
	outline: none;
}
label {
	margin-bottom: 0.5rem;
}
.btn {
	border-radius: 30px;
  padding: 10px 40px;
  font-size: 20px;
	color: var(--font);
	background-color: var(--body-bg);
  border: none;
  box-shadow: var(--btn-shadow);
  cursor: pointer;
}
.btn-sm {
	padding: 5px 10px;
  font-size: 12px;
}
.btn-icon {
	width: 40px;
	height: 40px;
	padding: 0.25rem;
	font-size: 25px;
}
.btn.disabled {
	opacity: 0.4;
	cursor: default;
}
.link {
	color: var(--secondary);
	background: linear-gradient(90deg, var(--primary), var(--secondary));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	cursor: pointer;
	text-decoration: none;
}
.link:hover {
	text-decoration: underline;
}

.gradient-text {
	background: linear-gradient(90deg, var(--primary), var(--secondary));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}