@import url('https://fonts.googleapis.com/css?family=Arima+Madurai:300');

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scroll */
    overflow-y: auto; /* Allow vertical scroll */
}

/* Ensure the root HTML and body elements take full height */
html {
    height: 100%;
}
body {
    min-height: 100%;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

h1 {
	font-family: 'Arima Madurai', cursive;
	color: black;
	font-size: 4rem;
	letter-spacing: -3px;
	text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
	position: relative;
	z-index: 3;
	margin-bottom: 2rem; /* Add some space below the title */
}

.auth-forms {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.3); /* Transparent background for the forms container */
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    max-width: 400px; /* Limit width for better appearance */
    width: 90%; /* Responsive width */
}

.auth-forms .authentication-card {
    background-color: transparent !important; /* Make the card itself transparent */
    box-shadow: none !important; /* Remove card shadow */
    border: none !important; /* Remove card border */
    width: 100%; /* Ensure it takes full width of its parent */
}

.auth-forms .authentication-card-logo {
    display: none; /* Hide the logo if desired, or style it */
}

.auth-forms .mb-4 {
    color: white; /* Adjust text color for visibility */
}

.auth-forms label {
    color: white !important; /* Label text color */
}

.auth-forms input {
    background-color: rgba(255, 255, 255, 0.2) !important; /* Transparent input background */
    border: 1px solid rgba(255, 255, 255, 0.5) !important; /* Transparent input border */
    color: white !important; /* Input text color */
}

.auth-forms input::placeholder {
    color: rgba(255, 255, 255, 0.7) !important; /* Placeholder color */
}

.auth-forms .flex.items-center {
    color: white; /* Checkbox label color */
}

.auth-forms .underline {
    color: rgba(255, 255, 255, 0.8) !important; /* Link color */
}

.auth-forms .underline:hover {
    color: white !important; /* Link hover color */
}

.auth-forms .ms-4 {
    background-color: rgba(255, 255, 255, 0.2) !important; /* Button background */
    border: 1px solid rgba(255, 255, 255, 0.5) !important; /* Button border */
    color: white !important; /* Button text color */
}

.auth-forms .ms-4:hover {
    background-color: rgba(255, 255, 255, 0.4) !important; /* Button hover background */
}

.form-toggle {
    margin-top: 1.5rem;
    display: flex;
    gap: 1rem;
}

.form-toggle button {
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.form-toggle button:hover {
    background-color: rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.8);
}

.container {
	z-index: 1;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh; /* Use 100vh for full viewport height */
	width: 100vw; /* Ensure container takes full viewport width */
	background-image: linear-gradient(to bottom,  rgba(255,168,76,0.6) 0%,rgba(255,123,13,0.6) 100%), url('https://images.unsplash.com/photo-1446824505046-e43605ffb17f');
	background-blend-mode: soft-light;
	background-size: cover;
	background-position: center center;
	padding: 2rem;
}

.bird {
	background-image: url(../images/bird-cells-new.svg);
	background-size: auto 100%;
	width: 88px;
	height: 125px;
	will-change: background-position;
	
	animation-name: fly-cycle;
	animation-timing-function: steps(10);
	animation-iteration-count: infinite;
}

.bird--one {
	animation-duration: 1s;
	animation-delay: -0.5s;		
}

.bird--two {
	animation-duration: 0.9s;
	animation-delay: -0.75s;
}

.bird--three {
	animation-duration: 1.25s;
	animation-delay: -0.25s;
}

.bird--four {
	animation-duration: 1.1s;
	animation-delay: -0.5s;
}

.bird-container {
	position: absolute;
	top: 20%;
	left: -10%;
	transform: scale(0) translateX(-10vw);
	will-change: transform;
	
	animation-name: fly-right-one;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.bird-container--one {
	animation-duration: 15s;
	animation-delay: 0;
}

.bird-container--two {
	animation-duration: 16s;
	animation-delay: 1s;
}

.bird-container--three {
	animation-duration: 14.6s;
	animation-delay: 9.5s;
}

.bird-container--four {
	animation-duration: 16s;
	animation-delay: 10.25s;
}

@keyframes fly-cycle {
	
	100% {
		background-position: -900px 0;
	}
	
}

@keyframes fly-right-one {
	
	0% {
		transform: scale(0.3) translateX(-10vw);
	}
	
	10% {
		transform: translateY(2vh) translateX(10vw) scale(0.4);
	}
	
	20% {
		transform: translateY(0vh) translateX(30vw) scale(0.5);
	}
	
	30% {
		transform: translateY(4vh) translateX(50vw) scale(0.6);
	}
	
	40% {
		transform: translateY(2vh) translateX(70vw) scale(0.6);
	}
	
	50% {
		transform: translateY(0vh) translateX(90vw) scale(0.6);
	}
	
	60% {
		transform: translateY(0vh) translateX(110vw) scale(0.6);
	}
	
	100% {
		transform: translateY(0vh) translateX(110vw) scale(0.6);
	}
	
}

@keyframes fly-right-two {
	
	0% {
		transform: translateY(-2vh) translateX(-10vw) scale(0.5);
	}
	
	10% {
		transform: translateY(0vh) translateX(10vw) scale(0.4);
	}
	
	20% {
		transform: translateY(-4vh) translateX(30vw) scale(0.6);
	}
	
	30% {
		transform: translateY(1vh) translateX(50vw) scale(0.45);
	}
	
	40% {
		transform: translateY(-2.5vh) translateX(70vw) scale(0.5);
	}
	
	50% {
		transform: translateY(0vh) translateX(90vw) scale(0.45);
	}
	
	51% {
		transform: translateY(0vh) translateX(110vw) scale(0.45);
	}
	
	100% {
		transform: translateY(0vh) translateX(110vw) scale(0.45);
	}
	
}

@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem;
        margin-bottom: 1.5rem;
    }

    .auth-forms {
        padding: 1.5rem;
    }

    .form-toggle {
        margin-top: 1rem;
    }

    .form-toggle button {
        font-size: 0.9rem;
        padding: 0.4rem 0.8rem;
    }

    .container {
        min-height: 100vh;
        height: 100%; /* Ensure container takes full height on mobile */
    }

    .bird {
        width: 60px;
        height: 85px;
    }

    @keyframes fly-cycle {
        100% {
            background-position: -600px 0;
        }
    }

    @keyframes fly-right-one {
        0% {
            transform: scale(0.2) translateX(-10vw);
        }
        100% {
            transform: translateY(0vh) translateX(110vw) scale(0.4);
        }
    }

    @keyframes fly-right-two {
        0% {
            transform: translateY(-1vh) translateX(-10vw) scale(0.3);
        }
        100% {
            transform: translateY(0vh) translateX(110vw) scale(0.3);
        }
    }
}