/* General Styles */
body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; background-color: #000000; color: #e0e0e0; line-height: 1.6; position: relative; overflow-x: hidden; display: flex; flex-direction: column; min-height: 100vh;}
a {color: #00ffd5; text-decoration: none; transition: color 0.3s ease;}
a:hover {color: #00ccaa;}
/* Header Styles */
header {background-color: #00000000; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);}
body, html {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal; font-variation-settings: "ROND" 0; width: 100%; overflow-x: hidden; overflow-y: hidden;}
.main-nav {display: flex; justify-content: space-between; align-items: center; padding: 15px 30px; border-bottom: 1px solid #00000000;}
.logo {
    font-size: 1.8em;
    font-weight: bold;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.2;
    font-family: "Doto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-variation-settings: "ROND" 0;
}

.back-text {
    color: #00ffd5;
    cursor: pointer;
    margin-left: 20px;
    font-size: 1.2em;
    align-self: center;
    font-family: "Doto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-variation-settings: "ROND" 0;
}
/* Main Content Styles */
main {flex: 1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 25px; padding: 25px; max-width: 1400px; margin: 0 auto; min-height: auto;}
/* For Signup,Login,Reset  button */ 
.btn {display: block; width: 6.5em; height: 2.3em; margin: 0.5em auto; background: black; color: white; border: none; border-radius: 0.625em; font-size: 20px; font-weight: bold; cursor: pointer; position: relative; z-index: 1; overflow: hidden;}
button:hover {color: black;}
button:after {content: ""; background: white; position: absolute; z-index: -1; left: -20%; right: -20%; top: 0; bottom: 0; transform: skewX(-45deg) scale(0, 1); transition: all 0.5s;}
button:hover:after { transform: skewX(-45deg) scale(1, 1); -webkit-transition: all 0.5s; transition: all 0.5s;}
/* Login Form Styles */
.login-container {background-color: transparent; border-radius: 15px; padding: 30px; width: 100%; max-width: 400px; margin: auto; animation: slideUp 0.5s ease-out;}
/* Sign Up Form Styles */
.signup-container { background-color: transparent; border-radius: 15px; padding: 30px; width: 100%; max-width: 400px; margin: auto; animation: slideUp 0.5s ease-out;}
.signup-container h2 {text-align: center; margin-bottom: 25px; color: #ffffff; font-size: 1.8rem; background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradient 15s ease infinite; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 15px rgba(0, 255, 213, 0.7);}
.signup-form .form-group {margin-bottom: 20px;}
.signup-form label {display: block; margin-bottom: 8px; font-weight: 500; color: #e0e0e0;}
.signup-form input[type="text"],
.signup-form input[type="email"],
.signup-form input[type="password"] {width: 90%; margin: 0 auto; padding: 12px; border: 1px solid #333; border-radius: 15px; background-color: #222; color: #e0e0e0; font-size: 1rem; transition: border-color 0.3s, box-shadow 0.3s;}
.signup-form input[type="text"]:focus,
.signup-form input[type="email"]:focus,
.signup-form input[type="password"]:focus {border-color: #00e6b8; outline: none;}
/* Additional styles for the validation messages */
#username-validation-message,
#email-validation-message {text-align: center;}
/* Style for the terms checkbox */
.terms-checkbox {display: flex; align-items: center; font-size: 0.9em;}
.terms-checkbox input[type="checkbox"] {appearance: none; -webkit-appearance: none; width: 20px; /* Slightly larger */ height: 20px; /* Slightly larger */ border: 2px solid #00ffd5; border-radius: 5px; /* Slightly more rounded */ background-color: #222; cursor: pointer; position: relative; margin-right: 10px; /* Increased margin */ transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;}
.terms-checkbox input[type="checkbox"]:hover,
.terms-checkbox input[type="checkbox"]:focus {border-color: #00ccaa; box-shadow: 0 0 8px rgba(0, 255, 213, 0.4); /* Subtle shadow on hover/focus */ outline: none;}
.terms-checkbox input[type="checkbox"]:checked {background-color: #00ffd5; border-color: #00ffd5;}
.terms-checkbox input[type="checkbox"]:checked::after { content: '\2713'; color: #000; font-size: 14px;  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.terms-checkbox label {cursor: pointer;}
/* Forgot Password Form Styles */
.forgot-password-container {background-color: transparent; border-radius: 15px; padding: 30px; width: 100%; max-width: 400px; margin: auto; animation: slideUp 0.5s ease-out;}
.forgot-password-container h2 {text-align: center; margin-bottom: 25px; color: #ffffff; font-size: 1.8rem; background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradient 15s ease infinite; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 15px rgba(0, 255, 213, 0.7);}
.forgot-password-form .form-group {margin-bottom: 20px;}
.forgot-password-form label {display: block; margin-bottom: 8px; font-weight: 500; color: #e0e0e0;}
.forgot-password-form input[type="email"] {width: 90%; margin: 0 auto; padding: 12px; border: 1px solid #333; border-radius: 15px; background-color: #222; color: #e0e0e0; font-size: 1rem; transition: border-color 0.3s, box-shadow 0.3s;}
.forgot-password-form input[type="email"]:focus {border-color: #ffffff; outline: none;}
/* OTP Container Styles */
.otp-container {background-color: transparent; border-radius: 15px; padding: 30px; width: 100%; max-width: 400px; margin: auto; animation: slideUp 0.5s ease-out; display: none;}
.otp-container h2 {text-align: center; margin-bottom: 25px; color: #ffffff; font-size: 1.8rem; background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradient 15s ease infinite; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 15px rgba(0, 255, 213, 0.7);}
.otp-form .form-group {margin-bottom: 20px;}
.otp-form label {display: block; margin-bottom: 8px; font-weight: 500; color: #e0e0e0;}
.otp-form input[type="text"] {width: 90%; margin: 0 auto; padding: 12px; border: 1px solid #333; border-radius: 15px; background-color: #222; color: #e0e0e0; font-size: 1rem; transition: border-color 0.3s, box-shadow 0.3s;}
.otp-form input[type="text"]:focus {border-color: #00e6b8; outline: none;}
.login-container h2 {text-align: center; margin-bottom: 25px; color: #ffffff; font-size: 1.8rem; background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradient 15s ease infinite; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 15px rgba(0, 255, 213, 0.7);}
.login-form .form-group {margin-bottom: 20px;}
.login-form label {display: block; margin-bottom: 8px; font-weight: 500; color: #e0e0e0;}
.login-form input[type="text"],
.login-form input[type="password"] {width: 90%; margin: 0 auto; padding: 12px; border: 1px solid #333; border-radius: 15px; background-color: #222; color: #e0e0e0; font-size: 1rem; transition: border-color 0.3s, box-shadow 0.3s;}
.login-form input[type="text"]:focus,
.login-form input[type="password"]:focus {border-color: #00e6b8; outline: none;}
.form-options {display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;}
.remember-me {display: flex; align-items: center;}
.remember-me input[type="checkbox"] {appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 2px solid #00ffd5; border-radius: 5px; background-color: #222; cursor: pointer; position: relative; margin-right: 10px; transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;}
.remember-me input[type="checkbox"]:hover,
.remember-me input[type="checkbox"]:focus {border-color: #00ccaa; box-shadow: 0 0 8px rgba(0, 255, 213, 0.4); outline: none;}
.remember-me input[type="checkbox"]:checked {background-color: #00ffd5; border-color: #00ffd5;}
.remember-me input[type="checkbox"]:checked::after {content: '\2713'; color: #000; font-size: 16px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.forgot-password {color: #00ffd5; font-size: 0.9rem; padding-left: 30px;}
.login-btn {display: block; width: 80%; margin: 0 auto; padding: 12px; background-color: transparent; border: none; border-radius: 15px; color: white; font-size: 1rem; font-weight: 600; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;}
.login-btn:hover {transform: translateY(-2px);}
.login-btn:active {transform: translateY(0);}
.register-link {text-align: center; margin-top: 20px; font-size: 0.95rem;}
.register-link a {font-weight: 600;}
/* Footer Styles */
footer {text-align: center; padding: 1px; background-color: #00000000; color: #fff; width: 100%; box-sizing: border-box;}
@keyframes spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); }}
/* Responsive Adjustments */
@media (max-width: 768px) {.main-nav { flex-direction: row; flex-wrap: wrap; gap: 10px; padding: 10px 15px; align-items: center; }}
@keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; }}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; }}
@keyframes slideUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); }}