@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap");
body {
	font-family: "Poppins", sans-serif !important;
}

/* add padding on input */

.text-indent {
	text-indent: 0.5rem;
}

/* add password hide and show icon */

.password__icon {
	position: absolute;
	right: 0;
	padding: 15px 20px;
	cursor: pointer;
}

/* background grey */

.bg-grey-light {
	background: #f0f0f0;
}

.bg-grey-light:focus {
	background: #f0f0f0;
}

@media (min-width: 1024px) {
	body {
		overflow-y: hidden;
	}
	/* add circle blue background */
	.ball {
		overflow: hidden;
		transition: margin 1s;
		width: 600px;
		height: 600px;
	}
	.ball.login {
		margin-left: 50%;
		margin-top: 5%;
	}
	.ball.register {
		margin-left: 5%;
		margin-top: 6%;
	}
	/* bouncing effect */
	.bounce {
		animation: bounce 2s infinite alternate;
		-webkit-animation: bounce 2s infinite alternate;
	}
	@keyframes bounce {
		from {
			transform: translateY(0px);
		}
		to {
			transform: translateY(-35px);
		}
	}
	@-webkit-keyframes bounce {
		from {
			transform: translateY(0px);
		}
		to {
			transform: translateY(-35px);
		}
	}
	/* register form active */
	.register__form.active {
		margin-left: 10% !important;
		opacity: 1;
	}
	/* login form active */
	.login__form.active {
		opacity: 1;
		margin-left: 10% !important;
	}
}

@media (max-width: 768px) {
	.container .col-12.p-5 {
		padding: 0px !important;
	}
	body {
		overflow-x: hidden;
	}
}

/* register default */

.register__form {
	position: absolute;
	width: 100%;
	height: 100vh;
	margin-left: -100%;
	opacity: 0;
	transition: margin 1s, opacity 0.5s;
	z-index: 1;
}

.register__content {
	position: relative;
	width: 100%;
	height: 28rem;
	overflow-y: scroll;
}

.register__content::-webkit-scrollbar {
	display: none;
}

/* register form active */

.register__form.active {
	margin-left: 0%;
	opacity: 1;
}

/* login form default */

.login__form {
	position: absolute;
	width: 100%;
	height: 100vh;
	margin-left: -100%;
	opacity: 0;
	transition: margin 1s, opacity 0.5s;
	z-index: 1;
}

/* login form active */

.login__form.active {
	opacity: 1;
	margin-left: 0%;
}