* {
	margin: 0;
	padding: 0;
}

@-webkit-keyframes rotating {
	from {
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes rotating {
	from {
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	to {
		-ms-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

body {
	display: flex;
	padding-left: 50px;
	flex-direction: column;
	align-items: flex-start;
	background: linear-gradient(
		180deg,
		var(--theme) 0%,
		var(--theme2) 100%
	);
	color: white;
	font-family: Unbounded;

	> *:not(main) {
		display: none;
	}

	main {
		display: flex;
		padding: min(10vh, 95px) min(10vw, 90px);
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		flex-shrink: 0;
		align-self: stretch;
		border-radius: 15px 0px 0px 15px;
		background: black;
		min-height: calc(100vh - (min(10vh, 95px) * 2));

		.inner {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-start;
			flex: 1 0 0;
			width: min-content;
			gap: 30px;
			min-width: min(420px, 100%);

			.logo {
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 10px;

				img {
					height: 35px;
				}

				h1 {
					font-size: 30px;
					font-weight: 600;
				}
			}

			.form {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				gap: 30px;
				width: -webkit-fill-available;

				h1 {
					font-size: 30px;
					font-weight: 600;
					display: flex;
					align-items: center;
					gap: 10px;

					img {
						-webkit-animation: rotating 0.5s linear infinite;
						-moz-animation: rotating 0.5s linear infinite;
						-ms-animation: rotating 0.5s linear infinite;
						-o-animation: rotating 0.5s linear infinite;
						animation: rotating 0.5s linear infinite;
						height: 30px;
					}
				}

				.toggle {
					display: flex;
					width: -webkit-fill-available;
					flex-direction: row;
					justify-content: flex-start;
					align-items: flex-start;
					gap: 30px;
					border-bottom: 1px solid #ffffff50;

					.link {
						display: flex;
						justify-content: center;
						align-items: flex-start;
						gap: 10px;
						border-bottom: 3px solid transparent;
						font-size: 15px;
						font-weight: 400;
						padding-bottom: 5px;
						cursor: pointer;
						transition: 0.25s;
					}

					.link.active,
					.link:hover {
						border-color: var(--theme);
						transition: 0.25s;
					}

					.link.auth {
						display: none;
					}
				}

				.notice {
					display: none;
					flex-direction: column;
					border-left: 2px solid var(--theme);
					padding: 10px 15px;

					h5 {
						font-size: 15px;
						font-weight: 500;
					}

					p {
						opacity: 0.75;
						font-size: 12.5px;
						font-weight: 400;
					}
				}

				.fields {
					display: flex;
					width: -webkit-fill-available;
					flex-direction: column;
					justify-content: center;
					align-items: flex-start;
					gap: 15px;

					> h5 {
						color: var(--theme);
						font-size: 15px;
						font-weight: 500;
						cursor: pointer;
						transition: 0.25s;
						margin-left: auto;
					}

					> h5:hover {
						opacity: 0.75;
						transition: 0.25s;
					}

					button {
						display: flex;
						padding: 8px 17.5px;
						justify-content: center;
						align-items: center;
						gap: 10px;
						border-radius: 20px;
						color: white;
						background: var(--theme);
						font-family: Unbounded;
						font-size: 14px;
						font-weight: 400;
						border: none;
						cursor: pointer;
						transition: 0.25s;

						img {
							-webkit-animation: rotating 2s linear infinite;
							-moz-animation: rotating 2s linear infinite;
							-ms-animation: rotating 2s linear infinite;
							-o-animation: rotating 2s linear infinite;
							animation: rotating 2s linear infinite;
							height: 15px;
						}
					}

					button:hover,
					button:disabled {
						opacity: 0.75;
						transition: 0.25s;
					}

					button:has(img) {
						padding: 8px 15px 8px 12.5px !important;
						transition: 0.25s;
					}

					.group {
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						gap: 10px;
						align-self: stretch;

						h5 {
							font-size: 15px;
							font-weight: 500;
						}

						input {
							display: flex;
							padding: 0px 4px 8px 4px;
							align-items: center;
							gap: 10px;
							align-self: stretch;
							border: none;
							border-bottom: 1px solid white;
							font-family: Unbounded;
							font-size: 15px;
							font-weight: 500;
							background: transparent;
							color: white;
							outline: none;
							transition: 0.25s;
						}

						input:focus-visible,
						input:hover {
							border-color: var(--theme) !important;
							transition: 0.25s;
						}

						input.error {
							border-color: #ff5d5d !important;
						}
					}
				}

				.fields:not(.active) {
					display: none;
				}

				.alternatives {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					gap: 10px;

					p {
						opacity: 0.75;
						font-size: 12.5px;
						font-weight: 400;
					}

					.pills {
						display: flex;
						align-items: flex-start;
						align-content: flex-start;
						gap: 6px 4px;
						flex-wrap: wrap;

						.pill {
							display: flex;
							padding: 8px 12.5px;
							justify-content: center;
							align-items: center;
							gap: 10px;
							border-radius: 15px;
							background: #ffffff26;
							font-size: 12.5px;
							font-weight: 500;
							cursor: pointer;
							transition: 0.25s;
							color: white;
							text-decoration: none;

							img {
								width: auto;
								height: 15px;
							}
						}

						.pill:hover {
							opacity: 0.75;
							transition: 0.25s;
						}

						.pill[disabled] {
							opacity: 0.75;
							cursor: not-allowed;
							transition: 0.25s;
						}
					}
				}
			}

			.terms {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				gap: 5px;
				align-self: stretch;
				width: max-content;

				p {
					opacity: 0.75;
					font-size: 12.5px;
					font-weight: 400;
				}

				a {
					color: white;
					text-decoration: underline;
					transition: 0.25s;
				}

				a:hover {
					opacity: 0.75;
					transition: 0.25s;
				}

				p.dim {
					opacity: 0.5;
				}
			}
		}
	}
}

@media screen and (max-width: 900px) {
	.inner {
		width: -webkit-fill-available !important;
	}

	.terms {
		width: auto !important;
	}
}

@media screen and (max-width: 500px) {
	body {
		padding-left: 0 !important;
	}

	main {
		border-radius: 0 !important;
	}
}