/* General Styles */

/* Container Styles */
.container {
    padding: var(--spacing-medium) var(--spacing-small);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-medium);
    flex-shrink: 0;
    border-radius: var(--spacing-small);
    background: var(--background-color);
}

/* Text Styles */
.sub-text {
    color: var(--blue-color);
    font-family: var(--font-family);
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-default);
}

/* Button Container Styles */
.button-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-large);
}

/* Button Styles */
.register-btn, .login-btn {
    display: flex;
    width: var(--button-width);
    height: var(--button-height);
    padding: var(--spacing-medium) var(--spacing-small);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-medium);
    flex-shrink: 0;
}

/* Content Wrapper and Button Container Styles */
.content-wrapper,
.button-container {
    align-items: center;
    justify-content: center;
}

/* Google Login and Auth Button Styles */
#g-login,
.auth-btn {
    display: flex;
    width: var(--input-width);
    height: var(--input-height);
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-medium);
    flex-shrink: 0;
    border-radius: var(--border-radius);
    background: var(--dark-background-color);
    color: var(--light-text-color);
    font-family: var(--font-family);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    line-height: 1.25rem; /* 142.857% */
    letter-spacing: -0.0175rem;
}

.container-index {
    padding: 2.5%;
}

.content-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-radius);
    background: var(--dark-background-color);
    padding: 0;
    width: clamp(20rem, 95vw, 31.4375rem);
    height: clamp(25rem, 38.5625rem, 50rem);
}

.content-wrapper {
    display: flex;
    gap: 6%;
}

.top-side {
    display: flex;
    flex-direction: row-reverse;
    padding-bottom: 6rem;
}

.top-links {
    display: inline-flex;
    gap: 2.44rem;
}

    .top-links a {
        color: var(--gray-color) !important;
        text-align: center;
        font-family: var(--font-family);
        font-size: var(--font-size-medium);
        font-weight: var(--font-weight-medium);
        line-height: normal;
    }

.image-section {
    display: flex;
    width: 34.75rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 3.5rem;
}

.main-text-container {
    width: 100%;
    height: clamp(3.5rem,30vw,16rem);
    overflow: hidden;
}

.login {
    height: auto;
}

    .login span {
        color: var(--dark-background-color);
        font-family: var(--font-family);
        font-size: 2.25rem;
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-large) !important;
        letter-spacing: var(--letter-spacing-tight);
    }

.login-2 span {
    color: var(--gray-color);
    font-family: var(--font-family);
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-light);
    line-height: 100%; /* 1rem */
    letter-spacing: var(--letter-spacing-tight);
}

.login-section {
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xl);
    align-items: center;
}

.dx-texteditor-input {
    width: var(--input-width);
    height: var(--input-height);
    flex-shrink: 0;
}

#main-text {
    color: var(--main-heading-color);
    font-family: var(--font-family);
    font-size: var(--font-size-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-heading);
}

#login {
    display: flex;
    width: var(--input-width);
    height: var(--button-height);
    padding: var(--spacing-medium) var(--spacing-small);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-medium);
    flex-shrink: 0;
    border-radius: var(--border-radius);
    background: var(--primary-button-color);
}

#register, #login {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-medium);
    flex-shrink: 0;
    border-radius: var(--border-radius);
    font-family: var(--font-family);
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: var(--letter-spacing-tight);
}

#register {
    background: var(--secondary-button-color);
    color: #FFF;
}

#login {
    background: var(--primary-button-color);
    color: var(--dark-background-color);
}

/* Make everything adjustable on shrink */
html {
    font-size: var(--font-size-responsive); /* This makes 1rem equal to 1% of viewport width */
}
    html {
        font-size: 16px; /* Cap the scaling at 1920px viewport width */
    }
.content-area,
.image-section,
.main-text-container,
.sub-text,
.button-container,
.register-btn,
.login-btn {
    max-width: 100%;
}
  @media(max-width: 860px) {
    .content-wrapper,
    .button-container{
        flex-wrap:wrap;
    }
    .container-index {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        gap: 1rem;
        justify-content: space-between;
        height: 97dvh;
    }

        .content-section {
            align-self: stretch;
            width:100%;
        }

        span.main-text-wrapper {
            font-size: var(--font-size-xlarge);
            letter-spacing: normal;
        }

      

        .content-area {
            display: flex;
            height: clamp(6rem, 18vh, 11.875rem); 
            justify-content: center;
            align-items: center;
            align-self: stretch;
            min-width: 0px;
            width: 100%;
            margin-top: 2.5rem !important;

        }
    .top-links a { 
        font-size: var(--font-size-small);
        padding-bottom:0rem;
    }
    .top-side {
        padding-bottom: 0rem;
    }

    .content-area img {
    }

        .register-btn,
        .login-btn {
            display: flex;
            width: 21.3125rem;
            height: 3.375rem;
        }

        #main-text {
            color: var(--Blue-900, #0F172A);
            font-family: Manrope;
            font-size: 1.25rem;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
        }

    .content-wrapper {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: clamp(1rem, 3vh, 3.5rem);
        align-self: stretch;
        height: 100%;
    }

        .container-index {
            display: flex;
            flex-direction: column-reverse;
            gap: 1rem;
        }

        span.dx-button-text {
            display: block !important;
        }

    .image-section {
        width: 100%;
        text-align: center;
        align-items: center;
        gap: 1rem !important;
    }
    }



span.version-control {
    position: fixed;
    bottom: 0px;
    font-size: 12px;
    right: 10px;
    color: #D9D9D9;
}