* {
    font-family: 'Ubuntu', sans-serif;
    /* border: 1px solid red; */
}

/* styles under element body */
body {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 100vh;

    margin: 0;

    background-color: #F5F7F8;
}

/* styles under class "login" */
.login {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 48.6vw;
    height: auto;

    margin-top: 7vh;

    background-color: #FDFDFD;
    border: 1px solid #99B0BC;
    border-radius: 15px;
}

/* styles under class "interact-one" */
.interact-one {
    display: flex;

    width: 50%;
    margin-top: 3rem; /* was 5.7rem */

    text-align: center;

    cursor: pointer;
}

.interact-one div {
    width: 50%;
    padding: 0.563rem 0;
}

.login-tab {
    border-radius: 10px 0 0 10px;
}
.sign-up-tab {
    border-radius: 0 10px 10px 0;
}

.sign-up-tab, .login-tab {
    background-color: #E0E0E0;
    color: #9B9B9B;
    font-size: 1.125rem;
}

.default {
    background-color: #303E45;
    color: #C2D4DA;
}

/* styles under class "user-details" */
.user-details {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;

    width: 78.6%;

    margin-top: 1.2rem; /* was 1.6rem */

    background-color: #FDFDFD;
}

.details {
    display: flex;
    align-items: center;
    gap: 1.5rem;

    padding: 0.76rem 1.5rem;

    background-color: #F9FBFC;
    border: 1px solid #C2D4DA;
    border-radius: 10px;
}

.details input {
    width: 80%;
    
    background-color: #F9FBFC;
    border: none;
    font-size: 1.125rem;
    outline: none;
}

.details input::placeholder {
    color: #C2D4DA;
}

.details .password-vis:hover {
    cursor: pointer;
}

/* styles under class "interact-two" */
.interact-two {
    display: flex;
    justify-content: space-between;
    width: 78.6%;

    margin-top: 1rem;

    color: #75858A;
}

.interact-two a {
    text-decoration: none;
    color: #75858A;
}

.interact-two .remember-me {
    cursor: pointer;
}

/* styles under class "login-button" */
.login-button {
    width: 78.6%;

    padding: 0.719rem 0;
    margin-top: 1.3rem; /* was 2.438rem */

    background-color: #303E45;  
    border: 1px solid #303E45;
    border-radius: 25px;
    color: #C2D4DA;
    font-size: 1.25rem;
}

/* styles under class "login-sign-up-text" */
.login-sign-up-text {
    font-size: 1rem;
    color: #75858A;

    margin-top: 1.5rem; /* was 3.1rem */
}

.g-recaptcha {
    margin-top: 1.2rem;
}


/* styles under class "interact-three" */
.interact-three {
    display: flex;
    gap: 2.188rem;

    margin-top: 1rem;
    margin-bottom: 3rem; /* was 9.25rem, 7.46rem*/
}

.interact-three input {
    width: 2.6rem;
    height: 2.6rem;
}


.hidden {
    display: none;
}

.get-started-button {
    width: 78.6%;

    padding: 0.719rem 0;
    margin-top: 1.3rem;

    background-color: #303E45;  
    border-radius: 25px;
    border: 1px solid #303E45;
    color: #C2D4DA;
    font-size: 1.25rem;
}

.message {
    display: flex;
    justify-content: center;
    
    height: 1.2rem;
}