/* Container for the body */
body {
    background-color: #FAFAFA;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: 'Inter'; 
}

/* Container for login and register page */
.container {
    background-color: #FFFFFF;
    box-shadow: 0px 0px 20px 0px #00000040; 
    border-radius: 10px;
    padding: 63px 70px 167px 72px;
}

/* Inner container for login page with center alignment */
.inner-container-login, .inner-container-register {
    width: 423px;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: start;
    align-items: center;
}

/* Styling for the inner container of the login page */
.inner-container-login{
    gap: 62.85px;
    height: 687px;
}

/* Styling for the inner container of the register page */
.inner-container-register{
    gap: 54.85px;
    height: 769px;
}

/* Logo styling */
.logo {
    width: 150px;
    height: 92.15px;
} 

/* Outer container for the login form and content */
.outer-container{
    width: 423px;
    height: 532px;
}

/* Content section inside the outer container */
.content{
    margin-bottom: 42px;
}

/* Styling for the welcome message text */
.text1{
    font-size: 20px;
    color: #4D4D4D;
}

/* Styling for the subtext below the welcome message */
.text2{
    font-size: 15px;
    color: #ababab;
}

/* Login form styling */
.login-form { 
    gap: 24px;   
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
} 

/* Form container styling for individual form fields */
.form {
    gap: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;  
}

/* Label styling for the form fields */
.form label {
    font-size: 16px;
    line-height: 16px;
} 

/* Input field styling for form */
.form input {
    padding: 16px;
    gap: 8px;
    border-radius: 8px;
    border: 1px solid #DCD9D9;
}

/* Styling for checkbox and 'remember me' options */
.form-optionslogin , .form-optionsRegister{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 42px;
}

/* Styling for login options section */
.form-optionslogin{
    margin-bottom: 42px;
}

/* Styling for register options section */
.form-optionsRegister{
    margin-bottom: 38px;
}

/* Checkbox styling */
.checkbox {
    appearance: none;
    cursor: pointer;
    width: 16px;
    height: 16px;
    border-radius: 4px; 
    border: 2px solid #5c5a5a; 
    position: relative;
}

/* Container for checkbox and label alignment */
.check{
    display: flex;
    align-items: center;
}

/* Styling for checked checkbox */
.checkbox:checked{
    background-color: #FA7C54;
    border-color: #FA7C54;
}

/* After content for checked state */
.checkbox:checked::after {
    content: '✔';
    color: white; 
    font-size: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Styling for forgot password link */
.forget-password{
    color: black;
}

/* Button styling for login and register buttons */
.login-button, .register-button{
    width: 100%;
    padding: 16px;
    border-radius: 8px;
    background-color: #FA7C54;
    border: 1px solid #FA7C54;
    color: white;
    font-size: 16px;
    text-align: center;
}

/* Styling for login button */
.login-button{
    margin-bottom:63px ;
}

/* Styling for register button */
.register-button{
    margin-bottom:38px ;
}

/* Footer links section with space between elements */
.footer-links {
    justify-content: space-between;
    align-items: center;
    display: flex;
}

/* Styling for register text in footer */
.register{
    color: #4D4D4D;
    font-size: 16px;
}

/* Responsive styles for screen widths smaller than 768px */
@media (max-width: 768px){
    .container {
        padding: 40px 30px 100px 30px;
    }
    .inner-container {
        width: 90%; 
        height: auto; 
        gap: 30px; 
    }
}

/* Responsive styles for screen widths smaller than 480px */
@media (max-width: 480px) {
    .container {
        padding: 20px 15px 50px 15px; 
    }
}

/* Media query for screens smaller than 768px */
@media (max-width: 768px) {
    .container {
        padding: 40px 30px 100px 30px;
    }
    .inner-container {
        width: 90%;
        height: auto;
        gap: 30px;
    }
}

/* Media query for screens smaller than 480px */
@media (max-width: 480px) {
    .container {
        padding: 40px 30px 80px 30px;
    }
    .inner-container {
        width: 100%;
        gap: 20px;
    }
    .logo {
        width: 120px;
        height: 75px;
    }
    .outer-container {
        width: 100%;
    }
    .content {
        margin-bottom: 30px;
    }
    .text1 {
        font-size: 18px;
    }
    .text2 {
        font-size: 14px;
    }
    .login-button {
        padding: 12px;
    }
}