:root {
    --width: 100%;
    --max-width: 1920px;
    /* COLOR CODE */
    --primary: #9683d0;
    --primary-light: #E4DFF1;
    --secondary: #9fa6b2;
    --success: #44b678;
    --success-light: #44b67742;
    --danger: #dc4c64;
    --warning: #ffc048;
    --warning-light: #ffbf483b;
    --info: #54b4d3;
    --light: #ffffff;
    --dark: #5b5555;
    --dark-light: #5b5555d7;
    --border: #d4d4d467;
    --transparent: #332d2da1;

    /* HOVER COLOR CODE */
    --hover-primary: #9683d09c;
    --hover-secondary: #9197a1;
    --hover-success: #3da36b;
    --hover-danger: #d34a61;
    --hover-warning: #ebb042;
    --hover-info: #4da3c0;
    --hover-light: #e9e7e7;
    --hover-dark: #252121;

    --light-danger: #ea4e6852;

    /* BORDER SIZE */
    --small-border: 1px;
    --medium-border: 1.5px;
    --large-border: 2px;
    /* WIDTH SIZE */
    --small-width: 350px;
    --medium-width: 450px;
    --large-width: 550px;
    /* WIDTH SIZE */
    --small-height: 250px;
    --medium-height: 450px;
    --large-height: 550px;

    /* RADIUS SIZE */
    --small-radius: 0.2rem;
    --medium-radius: 0.6rem;
    --large-radius: 1rem;
    --extra-large-radius: 2rem;

    /* ICON SIZE */
    --tiny-icon: 14px;
    --small-icon: 16px;
    --medium-icon: 18px;
    --large-icon: 20px;

    /* AVATAR SIZE */
    --small-avatar: 45px;
    --medium-avatar: 50px;
    --large-avatar: 55px;

    /* MARGIN SIZE */
    --tiny-margin: 3px;
    --small-margin: 4px;
    --medium-margin: 6px;
    --large-margin: 10px;

    /* PADDING SIZE */
    --tiny-padding: 5px;
    --small-padding: 6px;
    --medium-padding: 8px;
    --large-padding: 10px;

    /* GAP SIZE */
    --tiny-gap: 5px;
    --small-gap: 6px;
    --medium-gap: 8px;
    --large-gap: 10px;
    --extra-large-gap: 12px;

    /* TEXT SIZE */
    --tiny-text: 12px;
    --small-text: 13px;
    --medium-text: 14px;
    --large-text: 15px;
     --extra-large-text: 20px;

    /* TEXT WEIGHT */
    --thin: 300;
    --normal: 400;
    --medium: 500;
    --semi-bold: 600;
    --bold: 700;
}
.login-container{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
}
.login-register-container{
    width: 400px;
    height: fit-content;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: var(--large-gap);
}
.login-register-heading-text{
    display: flex;
    align-items: center;
    gap: var(--small-gap);
}
.login-register-heading-text span{
    font-size: var(--medium-text);
}
.login-clapping-img{
    width: var(--tiny-icon);
    height: var(--tiny-icon);
}
.continue-with-google{
    width: 100%;
}
.continur-with-google-btn{
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--small-gap);
    border:  var(--small-border) solid var(--border);
    border-radius: var(--small-radius);
}
.continur-with-google-btn span{
    font-size: var(--small-text);
    font-weight: var(--medium);
}
.or-section{
    width: 100%;
    position: relative;
    height: 1px;
    margin: 1rem 0;
    border-bottom: var(--small-border) solid var(--border);
}
.or-section span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--light);
    font-size: var(--tiny-text);
    font-weight: var(--medium);
}
.login-register-form{
    width: 100%;
    height: fit-content;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: var(--small-gap);

}
.login-register-form-group{
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    margin: .3rem 0;
}
.login-register-form-group label{
    font-size: var(--medium-text);
    margin-bottom: var(--tiny-margin);
    font-weight: var(--medium);
}
.login-register-form-group input{
    width: 100%;
    height: 40px;
    border:  var(--small-border) solid var(--border);
    border-radius: var(--small-radius);
    padding: 0 var(--large-padding);
}
.login-register-form-group input::placeholder{
    font-size: var(--medium-text);
    margin-bottom: var(--tiny-margin);
    color: var(--dark-light);
}
.login-register-form-group input:focus {
    border-color: #9683d0; 
    outline: none; 
}
.login-register-form-group textarea{
    padding: var(--small-padding);
}

.forget-password-section{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.login-register-btn{
    width: 100%;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border-radius: var(--small-radius);
}
.login-register-btn span{
    color: var(--light) !important;
    font-size: var(--medium-text);
    font-weight: var(--medium);
}
.forgot-password, .login-link{
    font-size: var(--medium-text);
}
.navigate-login-register{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.back-to-home-link{
    margin: var(--medium-margin)0;
    font-size: var(--medium-text);
    text-decoration: none;
}
.login-link{
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--small-gap);
}
.nav-link-container span span{
    color: var(--primary);
}
.nav-link-container img{
    width: var(--tiny-icon);
    height: var(--tiny-icon);
    aspect-ratio: 1/1;
}

.login-register-form-group textarea{
    width: 100%;
    border:  var(--small-border) solid var(--border);
    border-radius: var(--small-radius);
}
.login-register-form-group textarea::placeholder{
    font-size: var(--small-text);
    margin-bottom: var(--tiny-margin);
    color: var(--dark-light);
}
.login-register-form-group textarea:focus{
    border-color: var(--primary);
}
.return-to-login-page-from-reset-password {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 1.5rem;
}
.return-to-login-page-from-reset-password img{
    width: 18px;
    height: 18px;
}
.return-to-login-page-from-reset-password a{
    text-decoration: none;
}
@media (max-width: 768px) {
    .login-register-container{
        width: 360px;
    }
}