* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body {
	background: linear-gradient(to right, #ff8c00, #ff5f1f);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 100vh;
	font-family: 'Montserrat', serif;

	.container {
		background-color: #fff;
		border-radius: 30px;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
		position: relative;
		overflow: hidden;
		width: 768px;
		max-width: 100%;
		min-height: 480px;

		.form-container {
			position: absolute;
			top: 0;
			height: 100%;
			transition: all 0.6s ease-in-out;
		}
		.sign-in {
			left: 0;
			width: 50%;
			z-index: 2;
		}
		.sign-up {
			left: 0;
			width: 50%;
			opacity: 0;
			z-index: 1;
		}

		form {
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			padding: 0 40px;
			height: 100%;

			.social-icons {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 20px;
				margin: 20px 0px;

				.icons {
					border: 1px solid #ccc;
					border-radius: 20%;
					display: inline-flex;
					justify-content: center;
					align-items: center;
					margin: 0 3px;
					width: 40px;
					height: 40px;
				}
			}
			span {
				font-size: 12px;
			}
			input {
				background-color: #eee;
				border: none;
				margin: 8px 0;
				padding: 10px 15px;
				font-size: 13px;
				border-radius: 8px;
				width: 100%;
				outline: none;
			}
			a {
				color: #333;
				font-size: 13px;
				text-decoration: none;
				margin: 15px 0 10px;
			}
			button {
				background-color: #ff5f1f;
				color: #fff;
				font-size: 12px;
				padding: 10px 45px;
				border: 1px solid transparent;
				border-radius: 8px;
				font-weight: 600;
				letter-spacing: 0.5px;
				text-transform: uppercase;
				margin-top: 10px;
				cursor: pointer;
			}
		}

		p {
			font-size: 14px;
			line-height: 20px;
			letter-spacing: 0.3px;
			margin: 20px 0;
		}

		.toggle-container {
			position: absolute;
			top: 0;
			left: 50%;
			width: 50%;
			height: 100%;
			overflow: hidden;
			transition: all 0.6s ease-in-out;
			border-radius: 150px 0 0 100px;
			z-index: 1000;

			.toggle {
				background: linear-gradient(to right, #ff8c00, #ff5f1f);
				color: #fff;
				position: relative;
				left: -100%;
				height: 100%;
				width: 200%;
				transform: translateX(0);
				transition: all 0.6s ease-in-out;

				.toggle-panel {
					position: absolute;
					width: 50%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					padding: 0 30px;
					text-align: center;
					top: 0;
					transform: translateX(0);
					transition: all 0.6s ease-in-out;

					label {
						background-color: transparent;
						border-color: #fff;
						color: #fff;
						font-size: 12px;
						padding: 10px 45px;
						border: 1px solid #fff;
						border-radius: 8px;
						font-weight: 600;
						letter-spacing: 0.5px;
						text-transform: uppercase;
						margin-top: 10px;
						cursor: pointer;
					}
				}
				.toggle-left {
					transform: translateX(-200%);
				}
				.toggle-right {
					right: 0;
					transform: translateX(0);
				}
			}
		}

		.toggle-checkbox:checked ~ .toggle-container {
			transform: translateX(-100%);
			border-radius: 0px 150px 100px 0px;
		}
		.toggle-checkbox:checked ~ .toggle-container .toggle {
			transform: translateX(50%);
		}
		.toggle-checkbox:checked ~ .toggle-container .toggle-right {
			transform: translateX(200%);
		}
		.toggle-checkbox:checked ~ .toggle-container .toggle-left {
			transform: translateX(0);
		}
		.toggle-checkbox:checked ~ .sign-up {
			z-index: 5;
			opacity: 1;
			transform: translateX(100%);
		}
		.toggle-checkbox:checked ~ .sign-in {
			z-index: 1;
			opacity: 0;
			transform: translateX(100%);
		}
	}
}

.hidden {
	display: none;
}