/* edit start */
@font-face {
    font-family: 'Rethink Sans';
    src: url('../fonts/RethinkSans-Regular.ttf') format('truetype');
    font-weight: regular;
    font-style: normal;
}

/* edit end */

#main-div {
    font-family: Arial, sans-serif;
    width: 500px;
    margin: 0 auto;
    margin-top: 10vh;
    border: 3px solid #699DF1;
    border-radius: 10px;
    padding: 2rem;             /* optional: adds space inside */
    box-sizing: border-box;    /* makes width include padding */
}


#logo-img {
    display: block;
    margin: 0 auto;
    /* Center the image horizontally */
    margin-top: 25px;
    margin-bottom: 10px;
    /* Reduced to bring text closer */
    max-width: 25%;
    /* Make sure it scales down if necessary */
}

#text-logo {
    display: block;
    margin: 0 auto;
    /* Center the image horizontally */
    margin-bottom: 30px;
    max-width: 50%;
    /* Make sure it scales down if necessary */
}

#main-div input[type="email"],
#main-div input[type="password"],
#main-div input[type="text"] {
    display: block;
    width: 60%;
    /* Adjust width as needed */
    margin: 10px auto 20px;
    /* Centers the input horizontally and adds vertical spacing */
    height: 30px;
    /* Increased height for better visibility and easier interaction */
    padding: 5px 10px;
    /* Optional: Add padding inside the inputs */
    border: 1px solid #ccc;
    /* Optional: Style the border (change color as needed) */
    border-radius: 5px;
    /* Optional: Add rounded corners */
}

#remember-input {
    text-align: center;
    /* Centers the text and checkbox inside the div */
    margin: 20px auto;
    /* Adds vertical space and centers horizontally */
    width: 100%;
    /* Ensures the div takes the full width to align the checkbox correctly */
}

#main-div button {
    display: block;
    /* Makes the button a block-level element */
    margin: 20px auto;
    /* Centers the button horizontally and adds vertical spacing */
    padding: 10px 20px;
    /* Adds padding for better ergonomics and appearance */
    width: auto;
    /* Auto width to respect the padding and text size */
    border: none;
    /* Optional: Removes the default border, style as needed */
    background-color: #397ae3;
    /* Optional: Example to set background color */
    color: white;
    /* Optional: Sets the text color to white */
    cursor: pointer;
    /* Changes cursor to pointer when hovering over the button */
    border-radius: 10px;
    font-size: 16px;
    /* Sets a standard font size */
}

#status-message {
    position: relative;
    margin: 10px auto;
    padding: 10px;
    background-color: rgba(255, 1, 1, 0.2);
    color: white;
    width: 60%;
    /* Adjust width as needed */
    border-radius: 5px;
    /* Optional rounded corners */
    display: flex;
    /* Use flexbox for easier alignment */
    align-items: center;
    /* Align items vertically in the center */
}

#status-message p {
    flex-grow: 1;
    /* Allows the text paragraph to take up any extra space */
    margin: 0;
    /* Removes default margin to align text properly */
    color: rgba(187, 0, 7, 0.836);
}

#close-btn {
    color: rgba(187, 0, 7, 0.836);
    cursor: pointer;
    font-size: 20px;
    padding-left: 10px;
    /* Adds some space between the text and the close button */
}

.logo-image {
    height: auto;
    /* Maintain aspect ratio */
    width: 7rem;
    vertical-align: middle;
}

/* Terms and Conditions checkbox styling */
#terms-container{
    display: inline-block;
    /* Aligns the checkbox and text */
    margin-right: 5px;
    /* Adds space between checkbox and text */
    text-align: center;
    /* Centers the text and checkbox inside the div */
    /* Adds vertical space and centers horizontally */
    width: 100%;
    /* Ensures the div takes the full width to align the checkbox correctly */
    
}