signup.css

*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

body{
    width: 100%;
    height: 100vh;
    font-size: 18px;
    font-family: 'Baskervville', sans-serif;
    background-image:linear-gradient(#D0B6AB,#FAF7F6);
}

.signup {
    display: flex;   
    max-width: 1440px;
    
}

h1{
    text-align: center;
}

.left {
    width:40%;
    height:100vh;
    overflow: hidden;
}
.left img{
    width: 100%;
    height: 50vh;
    margin-top: 30%;
    margin-left: 12px;
    object-fit: contain;
}

.right {
    width: 60%;
    height: 100vh;
    overflow-x: hidden;
}
/* acct content */
.content {
    margin: auto;
    width:80%;
    height: 100vh;
}
.content h1{
    padding:40px 0px;
    color:rgba(81,77,77,1);
}
/* sign up with buttons */
.signupwith{
    display: flex;
    justify-content: center;
    width: 100%;
    gap:20px;
    margin: auto;
}
.signupwith img{
    width: 18px;
    transform: translateY(10%);
}
#g-icon{
    width:20px;
}
.signupwith a {
    text-decoration: none;
    padding: 10px;
    color: black;
    border: 1px solid ;
    border-radius: 3px;
    font-size: 14px;
}
/* or and the horizontal line */
.or{
    position: relative;
    text-align: center;
    margin: 20px auto;
    width: 90%;
    gap:20px;
}

h3:before{
    content: "";
    display: block;
    height: 2px;
    width: 35%;
    margin:0px;
    background-color: #000;
    position: absolute;
    top: 50%;
    left: 0px;
    z-index: -2;
}

h3:after{
    content: "";
    display: block;
    height: 2px;
    width: 35%;
    margin:0px;
    background-color: #000;
    position: absolute;
    right: 0px;
    top: 50%;
    z-index: -2;
}

.or span{
    background-color:clear;
    padding: 0px 10px;
    color:rgba(0,0,0,0.6);
}

/* form field */

.form label {
    font-size:18px;
    color: rgba(0,0,0,0.6);
}

input {
    margin-bottom:26px;
    width:100%;
    padding:26px 10px;
    font-weight: 400;
    font-size: 18px;
    border-style:none;
    border-radius:10px;
}
input::placeholder{
    font-size:16px;
    font-family: 'Baskervville',sans-serif;
}

/*create button*/

.create{    
    color: white;
    font-family: 'Baskervville', sans-serif;
    background-color: #782c00;
    font-size: 18px;
}

/*login link*/

#alt {
    text-align: center;
    margin:50px auto;
    color:rgba(0,0,0,0.7);
}

#alt a {
    text-decoration: none;
    color:#782c00;
    padding: 5px;
    font-weight: bold;
}

#alt a:hover{
    cursor: pointer;
}
/* eye icon */
.password{
    position: relative;
}

.password img{
    width: 20px;
    position: absolute;
    right:5%;
    top: 65px;   
}

.password1{
    position: relative;
}

.password1 img{
    width: 20px;
    position: absolute;
    right:5%;
    top: 65px;   
}


@media(min-width:1000px){
    h3:before, h3:after{width: 40%;}
}

@media(max-width:363px){
    .password1 img{
        top:95px;
    }
}