//---------Login Container---------
.login_container {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	//---------Login Box---------
	#login {
		border: 2px solid var(--logo-color);
		padding: 10px;
		margin-top: 10rem;
		margin-bottom: 3.5rem;
		width: 50%;
		min-width: 270px !important;
		min-height: 420px;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 1px 5px 5px 2px rgba(0, 0, 0, 0.5);
		background: rgba(255, 233, 174, 0.8);
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
		border-radius: 10px;
		border: 1px solid rgba(255, 255, 255, 0.5);
		@media screen and (max-width: 850px) {
			margin-top: 10rem;
			margin-bottom: 3.5rem;
		}
		@media screen and (max-height: 555px) {
			margin-top: 150px;
			margin-bottom: 50px;
		}
		//---------Login Form---------
		form {
			width: 100%;
			height: 100%;
			min-height: 400px;
			padding: 10px;
			h2 {
				font-size: 2rem;
				font-weight: 600;
				color: var(--logo-color);
				margin: 10px 0;
				opacity: 0.7;
				text-align: center;
				@media screen and (max-width: 850px) {
					margin-bottom: 1.5rem;
				}
			}
			//---------Inputs---------
			.form-group {
				margin-bottom: 1rem;
				label {
					display: block;
					margin-bottom: 0.5rem;
					font-size: 1rem;
					font-weight: 600;
					color: var(--logo-color);
				}
				input {
					box-shadow: none;
					outline: none;
					border: none;
					border-radius: 0%;
					border-bottom: 1px solid var(--logo-color);
					background: transparent;
					color: var(--logo-color);
					font-weight: 400;
					letter-spacing: 0.02rem;
					&::placeholder {
						color: var(--logo-color);
						opacity: 0.7;
					}
					&:focus {
						box-shadow: none;
						outline: none;
						border-bottom: 1px solid var(--logo-color);
					}
				}
			}
			//---------Sign Up Button---------
			.signup-btn {
				margin: auto;
				margin-top: 1rem;
				width: 100%;
				padding: 0.5rem 1rem;
				font-size: 1rem;
				font-weight: 600;
				color: var(--accent-color);
				background-color: var(--logo-color);
				border: 1px solid var(--accent-color);
				border-radius: 10px;
				cursor: pointer;
				box-shadow: none;
				outline: none;
				border: none;
				&:focus {
					box-shadow: none;
					outline: none;
					border: none;
				}
			}
			.social-login {
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				margin-top: 30px;
				flex-wrap: wrap;
				@media screen and (max-width: 850px) {
					justify-content: center;
					gap: 2rem;
				}
				.btn {
					width: 40%;
					min-width: 50px;
					padding: 0.5rem 1rem;
					font-size: 1rem;
					font-weight: 600;
					color: var(--accent-color);
					background-color: var(--logo-color);
					border-radius: 10px;
					cursor: pointer;
					box-shadow: none;
					outline: none;
					border: none;
					&:focus {
						box-shadow: none;
						outline: none;
						border: none;
					}
					img {
						width: 20px;
						height: 20px;
						border: 50%;
					}
				}
				//---------Social Login Button---------
				.google-btn {
					min-width: 220px;
				}
				//---------Login Button---------
				.login-btn {
					@media screen and (max-width: 850px) {
						min-width: 220px;
					}
				}
			}
		}
	}
}
