body {
    background: var(--background-color);
    background-size: cover;
}


.login {
    padding: 2rem;
    border-radius: .5rem;
    border: solid 1px var(--shadow-medium);

    display: flex; gap: 2rem;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    z-index: 9;
    background: var(--background-color);
    overflow: hidden;
    /*
    border: solid inset 2rem var(--background-color);
    */
}

.login > div > div  .data-flex-v {
    justify-content: flex-start;
    align-items: flex-start;
    gap: .5rem;
}

.login > div > div .data-flex-v i {
    font-size: 2rem;
    width: 2rem;
    height: 2rem;
}

/* .login > div > div  .data-flex-v > .data-flex{
    margin-top: .5rem;
} */

.login .logo h1 {
    font-size: 2.5rem;
}


.circle {
    width: 10rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--gradient1-r);
    z-index: 8;


}

.circle.small {
    width: 5rem;
    transition: all .5s cubic-bezier(0.680, 0.075, 0.490, 1.565);
    transform: scale(0);
}

input {
    background: transparent;
    border: none;
    outline: none;
    zoom: none;
    color: var(--text-color) !important;
    font-size: 1.5rem;
    font-weight: var(--fw-700);
    font-family: Poppins;
    max-width: 16rem;
}

input[type="password"]{
    letter-spacing: -.25rem;
}

input::placeholder {
    font-weight: var(--fw-500) !important;
    font-family: Inter;
    font-size: 1.2rem;
    letter-spacing: 0 !important;
    color: var(--shadow-medium) !important;
}


.logreg {
    height: 2px;
    width: 100%;
    background-color: grey;
}

@media screen and (max-width: 1250px){
    #welcome {
        display: none;
    }
}

p b {
    font-size: 1.25rem;
    font-weight: var(--fw-600);
}
.logo {
    align-items: start;
}