:root {
    --theme-white: #fff;
    --theme-primary: #028CF3;
    --theme-secondary: #74F1C5;
    --theme-font-primary: #1E1E1E;
    --theme-font-secondary: #7c7c7c;
    --theme-border: #E4E4E4;
}

a {
    text-decoration: none;
}

#auth {
    width: 100%;
    height: 100vh;
    display: flex;
    font-family: "Red Hat Display", sans-serif;
}

#auth-left {
    background-image: url('../images/auth-car.png');
    background-repeat: no-repeat;
    background-size: contain;
    height: 100%;
    position: relative;
    background-position: bottom;
}

#auth-left .content {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    top: 8rem;
    right: 0;
    left: 0;
}

#auth-left .content .prof {
    font-size: 4.5rem;
    color: var(--theme-white);
    -webkit-text-stroke: 2px var(--theme-font-primary)
}

#auth-left img {
    max-width: 100%;
    width: 5rem;
}

.heading {
    font-size: 4.5rem;
    color: var(--theme-font-primary);
}

.font-color-primary {
    color: var(--theme-font-primary);
}

.font-color-secondary {
    color: var(--theme-primary);
}

#auth-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 7.5rem 5rem;
    height: 100%;
}

#auth-right form {
    max-width: 30rem;
    width: 100%;
    padding-top: 4.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

#auth-right form label {
    font-size: 1.12rem;
    color: var(--theme-font-primary);
    font-weight: 600;
}

#auth-right form input {
    border-radius: 8px;
    border: 1px solid var(--theme-border);
    padding: 0.6rem 1rem;
}

#auth-right form .eye-pass {
   width: 20px;
   position: absolute;
   top: 12px;
   right: 20px;
   z-index: 9;
}

#auth-right form .auth-btn {
    background: linear-gradient(to right, var(--theme-primary), var(--theme-secondary));
    border: 0;
    padding: 0.675rem 1rem;
    border-radius: 50px;
    font-size: 1rem;
}

#auth-right form .divider {
    display: block;
    text-align: center;
    overflow: hidden;
}

#auth-right form .divider .divider-text {
    position: relative;
    display: inline-block;
    padding: 0 1rem;
    background-color: #fff
}

#auth-right form .divider .divider-text:before,.divider .divider-text:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    border-top: 1px solid #DFE3E7
}

#auth-right form .divider .divider-text:before {
    right: 100%
}

#auth-right form .divider .divider-text:after {
    left: 100%
}

#auth-right form .divider.divider-left .divider-text {
    float: left
}

#auth-right form .divider.divider-left-center .divider-text {
    left: -25%
}

#auth-right form .divider.divider-right-center .divider-text {
    left: 25%
}

#auth-right form .divider.divider-right .divider-text {
    float: right
}

#auth-right form .google-btn {
    background: transparent;
    border: 1px solid var(--theme-border);
    padding: 0.675rem 1rem;
    color: var(--theme-font-primary);
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
}

.text-color-primary {
    color: var(--theme-font-primary);
}

.user-select {
    user-select: none;
}

@media screen and (max-width:1500px) {
    .heading {
        font-size: 3.5rem;
    }

    #auth-left .content .prof {
        font-size: 3.5rem;
    }

    #auth-right{
        padding: 4rem 1rem;
    }
}