.login-header{
    padding: var(--size-200);
}

.login-logo{
    width: 150px;
    height: 80px;
}

.login-header-wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.login-header-wrapper a{
    padding: var(--size-400);
    gap: 2px;
    color: var(--primary-color);
}

.login-header-wrapper svg{
    width: 20px;
    height: 20px;
    fill: var(--primary-color);
}

.login-content{
    height: auto;
    margin: 0 auto;
    
}

.login-content-wrapper{
    overflow: hidden;
}

.login-main{
    width: 1980px;
    height: 800px;

    padding: var(--size-300);
    overflow: hidden;
}

.login-main::before{
    content: "";
    position: absolute;
    top: 128px;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: -1;
    
    background: url(assets/JPEG/pexels-olly-3755824.jpg);
    background-size: cover;
    background-position: top left;
    filter: grayscale(100);
}

.login-main button{
    font-size: var(--fs-500);
    width: 180px;
    height: 70px;
    border-radius: 48px;
}

.login-card{
    /* Position */
    position: absolute;   
    transform: translate(5%, 2.5%);
    /*General Styling*/
    width: 400px;
    height: 600px;
    background-color: var(--clr-base-100);
    padding-top: var(--size-200);
    padding-left: var(--size-600);
    padding-right: var(--size-600);
    border-radius: 12px;
}

.input-box{
    opacity: 0.8;
    border-radius: 48px;
    font-size: var(--fs-400);
    padding-left: var(--size-600);
    padding-right: var(--size-500);
    border: 1px solid;
    width: 100%;
    height: 4.35em;
}

.sign-up{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--size-400);
}

.sign-up a{
    color: var(--tertiary-accent-300);
    text-decoration: underline;
}

.sign-up a:hover,
.sign-up a:focus-within{
    color: var(--tertiary-accent-500);
}

#forgot-password{
    color: var(--primary-color);
    text-decoration: none;
    cursor: pointer;
}

#forgot-password:hover,
#forgot-password:focus{
    color: var(--secondary-color);
}

#remember-pane{
    position: relative;
    top: 12px;
    left: 48px;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: first baseline;
}