body{
    width: 100%;
 }
 
.signupcontainer{
    display: flex;
    flex-direction: row;
}


.signup{
    background: var(--login-white);
    width: 50%;
}

.signupimage{ 
    background: var(--login-pink);
    width: 50%;
}

.signupimage .signbrand{
    font-weight: 700;
    font-size: 90px;
    text-align: center;
    color: var(--log-white);
}

.signbrand > span{
    color: var(--text-black);
}
 
.signimg{
    width: 390px;
    height: 520px;
    align-self: flex-end;
    margin: 0 0 12px 293px;
}

.toggler{
    margin: 30px 0 0 600px;
}

.signbg{
    font-family: 'Poppins';
    font-weight: 700;
    font-size: 300px;
    margin: -40px 0 0 -500px;
    color: var(--logbg);
}

.signh1{
    font-family: 'Poppins';
    font-weight: 700;
    font-size: 70px;
    color: var(--text-black);
    margin: -220px 0 0 130px;
}

.lbl{
    font-weight: 700;
    font-size: 20px;
    color: var(--footer-text);
}

.signform .email{
    justify-content: center;
    margin-top: 40px;
}

.signform .password{
    justify-content: center;
    margin-top: 20px;
}
 
.email input, .password input, .paswd input{
    width: 350px;
}
 
.email{
    margin-right: 50px;
}

.password{
    margin-top: 30px;
}

.paswd{
    margin: 110px 0 0 -110px;
}

.signupbtn{
    width: 350px;
    margin-top: 10px;
    background: #FF4D47;
    font-weight: 700;
    font-size: 18px;
    color: #ffffff;
}

.signupbtn:hover{
    background: #FF4D47;
    color: #ffffff;
}

.signupcontainer p{
    font-weight: 700;
    font-size: 18px;
    color: var(--footer-text);
    margin: 60px 0 0 120px;
}

.login a{
    color: #FF4D47;
}

.login a:hover{
    color: var(--footer-text);
} 



@media screen and (max-width:769px) {
    body{
        width: 100%;
    }

    .signupcontainer{
        width: 765px;
        flex-flow: column wrap;
        justify-content: center;
    }

    .signupimage{
        display: none;
    }

    .signup{
        width: 768px;
        overflow: hidden;
    }

    .toggler{
        margin: 20px 0 0 700px;
    }

    .signh1{
        margin: -250px 0 0 200px;
    }

   .email{
        margin: 30px 0 0 200px;
    }

    .password{
        margin: 10px 0 0 200px;
    }

    .paswd{
        margin: 20px 0 0 200px;
    }

    .signupbtn{
        margin: 0 0 0 100px;
    }

    .signupcontainer p{
        margin-left: 230px;
        
    }
}




@media screen and (max-width:426px){
    body{
        width: 100%;
        overflow: hidden;
    }

    .signupcontainer{
        width: 425px;
        overflow: hidden;
        justify-content: center;
    }

    .signup{
        width: 425px;
    }
    
    .toggler{
        display: none;
        margin: 50px 0 0 360px;
    }

    .signbg{ 
        width: 425px;
        font-size: 250px;
        margin: -30px 0 0 -430px;
    }
 
    .signh1{
        margin: -190px 0 -30px 80px;
    }

    .signform{
        width: 425px;
        overflow: hidden;
    }

    .email{
        margin: 0 0 -5px 80px;
    }

    .password{
        margin-left: 80px;
    }

    .email input, .password input, .paswd input{
        width: 270px;
    }

    .paswd{
        margin-left: 80px;
    }

    .signupbtn{
        width: 270px;
        margin-left: -20px;
    }

    .signupcontainer p{
        margin: 35px 0 0 80px;
    }      
}