@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap');
*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Open Sans', sans-serif;
}
body
{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	/* Remove solid background color */
	/* background: #151f28; */
	background-image: url('../image/auth/authbg.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.square
{
	position: relative;
	width: 500px;
	height: 500px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.square i
{
	position: absolute;
	inset: 0;
	border: 2px solid #fff;
	transition: 0.5s;
}
.square i:nth-child(1)
{
	border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
	animation: animate 6s linear infinite;
}
.square i:nth-child(2)
{
	border-radius: 41% 44% 56% 59%/38% 62% 63% 37%;
	animation: animate 4s linear infinite;
}
.square i:nth-child(3)
{
	border-radius: 41% 44% 56% 59%/38% 62% 63% 37%;
	animation: animate2 10s linear infinite;
}
.square:hover i
{
	border: 6px solid var(--clr);
	filter: drop-shadow(0 0 20px var(--clr));
}
@keyframes animate
{
	0%
	{
		transform: rotate(0deg);
	}
	100%
	{
		transform: rotate(360deg);
	}
}
@keyframes animate2
{
	0%
	{
		transform: rotate(360deg);
	}
	100%
	{
		transform: rotate(0deg);
	}
}
.login 
{
	position: absolute;
	width: 300px;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 20px;
}
.login h2 
{
	font-size: 2em;
	color: #fff;
}
.login .inputBx 
{
	position: relative;
	width: 100%;
}
.login .inputBx input 
{
	position: relative;
	width: 100%;
	padding: 12px 20px;
	background: transparent;
	border: 2px solid #fff;
	border-radius: 40px;
	font-size: 1.2em;
	color: #000; /* Changed from #fff to #000 for black text */
	box-shadow: none;
	outline: none;
}
.login .inputBx input[type="submit"]
{
	width: 100%;
	background: #0078ff;
	background: linear-gradient(45deg,#ff357a,#fff172);
	border: none;
	cursor: pointer;
}
.login .inputBx input::placeholder 
{
	color: rgba(255,255,255,0.75);
}
.login .links
{
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
}
.login .links a 
{
	color: #fff;
	text-decoration: none;
}

/* Responsive styles for mobile */
@media (max-width: 600px) {
  body {
    padding: 10px;
    min-height: 100vh;
  }
  .square {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 350px;
    padding: 10px;
    max-width: 350px;
    margin: 0 auto;
  }
  .login {
    width: 100%;
    gap: 20px;
    padding: 10px 0;
  }
  .login h2 {
    font-size: 1.3em;
    text-align: center;
  }
  .login .inputBx input {
    font-size: 1em;
    padding: 12px 14px;
  }
  .login .inputBx input[type="submit"] {
    padding: 12px 14px;
    font-size: 1em;
  }
  .login .links {
    flex-direction: column;
    gap: 10px;
    align-items: center;
    padding: 0;
  }
  .login .links a {
    font-size: 1em;
  }
  .square i {
    border-width: 1.5px;
  }
}

/* Extra small devices */
@media (max-width: 400px) {
  .square {
    max-width: 95vw;
    min-height: 250px;
    padding: 5px;
  }
  .login {
    gap: 15px;
    padding: 5px 0;
  }
  .login h2 {
    font-size: 1em;
  }
  .login .inputBx input,
  .login .inputBx input[type="submit"] {
    font-size: 0.9em;
    padding: 10px 10px;
  }
}