/* General Styles */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: 'Inter', sans-serif;
    overflow: hidden; /* Prevent scrollbars during splash screen */
}

/* Splash Screen Styles */
#splash-screen {
    position: fixed; /* Cover the whole screen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FFFFFF; /* Background color */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Ensure it covers other content */
}

#logo {
    max-width: 100%; /* Ensure the image scales down if needed */
    height: auto;
    width: 131px; /* Fixed width */
    height: 180px; /* Fixed height */
}

/* Main Content Styles */
#desktop-2 {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow-x: scroll;
    background: #FFFFFF;
    mix-blend-mode: normal;
    display: none; /* Hidden initially */
}

#attendance-final {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: url('../App/assets/images/login_bg.gif') no-repeat center center;
    background-size: cover;
}

#form-login {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    padding: 24px;
    gap: 16px; /* Reduced gap between elements */
    position: absolute;
    width: 90%;
    max-width: 500px;
    height: auto;
    max-height: 340px;
    left: 50%;
    transform: translateX(-50%);
    top: 20%;
    background: rgba(128, 128, 128, 0.55);
    border: 1px solid #D9D9D9;
    border-radius: 8px;
}

/* Input Field Styles */
.input-field {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center align input fields */
    padding: 0;
    gap: 12px; /* Increase gap to accommodate reduced input height */
    width: 100%;
    max-width: 272px;
}

.input-field label {
    width: 100%;
    font-size: 16px;
    line-height: 140%;
    color: #1E1E1E;
    text-align: center; /* Center-align the label text */
}

.input-field input {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 16px; /* Further reduced padding */
    width: 100%;
    height: 32px; /* Further reduced height */
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #D9D9D9;
    border-radius: 8px;
    font-size: 16px;
    line-height: 100%;
    color: #B3B3B3;
}

/* Button Group Styles */
#button-group {
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    align-items: center;
    padding: 0;
    gap: 16px;
    width: 100%;
    max-width: 272px;
    height: auto;
}

#button-group button {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px;
    gap: 8px;
    width: 100%;
    max-width: 150px; /* Adjusted for better responsiveness */
    height: 40px;
    border-radius: 8px;
    background: rgba(128, 128, 128, 0.55);
    border: 1px solid rgba(128, 128, 128, 0.55);
    font-size: 16px;
    color: #1E1E1E;
}

/* Responsive Styles */
@media (max-width: 1280px) {
    #attendance-final {
        background-size: contain; /* Adjust the background size for smaller screens */
    }

    #form-login {
        width: 90%;
        top: 10%;
    }

    #button-group button {
        max-width: 100%; /* Ensure buttons take full width on small screens */
    }
}