*{
box-sizing:border-box;
margin:0;
padding:0;
}
body {
    font-family: Arial, sans-serif;
    background: #a9c3c5;

    min-height: 100vh;   /* allows growth */

    display: flex;
    justify-content: center;
    align-items: flex-start;  /* 👈 KEY FIX */

    padding: 40px 20px;  /* 👈 gives top + bottom space */

    overflow-y: auto;
}
.signup-form {
    width: 100%;
    max-width: 400px;

    background: #f9f9f9;
    padding: 25px;

    border-radius: 12px;
    border: 2px solid #fff9f9;
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);

    margin: 0 auto;   /* only horizontal centering */
}
.signup-form h1{

text-align:center;

font-size:28px;

margin-bottom:15px;

color:#333;

}
.signup-form label{

display:block;

font-weight:bold;

margin-top:10px;

margin-bottom:5px;

}
.signup-form input{

width:100%;

padding:10px;

border:1px solid #ccc;

border-radius:6px;

font-size:14px;

margin-bottom:10px;

}
.signup-form input:focus{

border-color:#4CAF50;

outline:none;

}
.signup-form button{

width:100%;

padding:10px;

border:none;

border-radius:6px;

font-size:16px;

cursor:pointer;

margin-top:8px;

}
.signup-form button:not(.google-btn){

background:#4CAF50;

color:white;

}



.signup-form button:not(.google-btn):hover{

background:#45a049;

}
.google-btn{

display:flex;

align-items:center;

justify-content:center;

gap:10px;

background:white;

border:2px solid #dadce0;

border-radius:50px;

font-size:15px;

color:#444;

}



.google-btn img{

width:20px;

height:20px;

}



.google-btn:hover{

background:#f7f8f8;

}
.or{

text-align:center;

margin-top:15px;

font-size:14px;

}
.or a{

color:#4CAF50;

text-decoration:none;

}



.or a:hover{

text-decoration:underline;

}
.required{

color:red;

font-weight:bold;

}
@media (max-width:600px){

.signup-form{

padding:20px;

}

.signup-form h1{

font-size:24px;

}

}