@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&display=swap');
* {
    font-family:  "Host Grotesk", sans-serif;
}

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #f5f5f5; /* Light background */
    color: #121212; /* Dark text */
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    flex-direction: column;
}

.login-box {
    background-color: #ffffff; /* Light form background */
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    width: 300px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin-bottom: 20px; /* Add margin for spacing below the login box */
}
h4 {
	place-self: center;
	background: linear-gradient(90deg, #00f, #0ff, #00f) -100%/ 200%;
	/* being excessively careful with compat, 
	 * though this has been supported unprefixed and 
	 * in the shorthand across major browsers for a while */
	-webkit-background-clip: text;
	        background-clip: text;
	/* use color, don't use -webkit-text-fill-color anymore, 
	 * was meant to solve a problem we haven't had in years */
	color: transparent;
	font:900 clamp(2em, 0, 2em);
	animation: shimmer 2s linear infinite
}

@keyframes shimmer { to { background-position: 100% } }

input, select, button {
    margin: 10px 0;
    padding: 10px;
    width: 100%;
    max-width: 300px;
    border: none;
    border-radius: 5px;
    box-sizing: border-box;
}

input, select {
    background-color: #f1f1f1;
}

input:focus, select:focus {
    outline: none;
    border: 2px solid #3700b3; /* Highlight border */
    background-color: #ffffff; /* Change background for focus */
}

button {
    background-color: #3700b3; /* Button background */
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transition */
}
button:hover {
    background-color: #6200ea; /* Slightly lighter shade */
    transform: scale(1.05); /* Slightly grow on hover */
}

button:disabled {
    background-color: grey;
    cursor: not-allowed;
}

.password-container {
    position: relative;
}

.toggle-password {
    position: absolute;
    right: 10px;
    top: 15px; /* Adjust to center vertically in the input */
    cursor: pointer;
    width: 25px; /* Adjust size as needed */
    height: 25px; /* Adjust size as needed */
}

.loading {
    display: inline-block;
    margin-left: 5px;
}

.error {
    color: red;
    font-weight: bold;
    margin-top: 10px;
}

.feature-info {
    background-color: #ffffff; /* Light background to match login box */
    padding: 20px;
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect */
    width: 500px; /* Match the width of the login box */
    margin: -150px auto 20px; /* Negative margin to pull it up slightly */
    text-align: center; /* Align text to the left */
    position: relative; /* To enable positioning relative to footer */
    z-index: 5; /* Ensure it appears above footer */
}

.feature-info ul {
    list-style-type: none; /* Use disc style for bullets */
    padding-left: 20px; /* Add padding for left alignment */
    margin: 0; /* Reset margin */
}

.feature-info li {
    margin-bottom: 15px;
}

.feature-info h2 {
    margin-top: 0; /* Remove margin from top */
    margin-bottom: 0;
}



/* Adjustments for mobile devices */
@media (max-width: 320px) {
    .login-box {
        margin-top: 20px; /* Higher position */
    }

    .feature-info {
        margin: -120px auto 20px; /* Pull it up slightly higher */
        width: 90%; /* Adjust width for small screens */
    }
}

/* Make sure it looks good on smaller screens */
@media (max-width: 545px) {
    .feature-info {
        width: 90%; /* Adjust width for small screens */
    }
}

.feature-info h2 {
    margin-top: 0; /* Remove margin from top */
    text-align: center;
}

.feature-info ul {
    padding: 0; /* Remove padding */
}

footer {
    position: fixed; /* Keep it fixed at the bottom */
    bottom: 0;
    width: 100%;
    background-color: #f1f1f1;
    color: #121212;
    text-align: center;
    padding: 10px;
    font-size: 14px;
    box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
    z-index: 10; /* Ensure it's below the feature info */
}

/* Loading spinner style */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3; /* Light border */
    border-top: 3px solid #3498db; /* Blue top border */
    border-radius: 50%;
    animation: spin 1s linear infinite; /* Spin animation */
    margin-left: 5px; /* Space from the loading text */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}