html{
  
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

}
body {
font-family: Arial, sans-serif;
background:url('12661.jpg');

background-repeat:no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.signin-container {
/* color: rgb(235, 221, 236); */
/* background-color: rgba(0, 0, 0, 0.137); */
/* opacity: ; */
  background-color: rgba(0, 0, 0, 0.8); /* Darker background */
    color: #ffffff; /* White text for contrast */
/*     padding: 20px; */
/*     border-radius: 8px; */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
padding: 20px;
border-radius: 8px;
/* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
width: 450px;
height:73%;
overflow-y: hidden;
overflow-x: wrap;
text-wrap: wrap;
display: flex;
justify-content: center;
align-items: center;
}
form{
width: 96%;
/* align-items: center;
 */
}
@media screen and (max-width: 700px){
    body{
        /* background-color:; */
    }
    .signin-container {
        width: 350px;
        height: 60%;
        margin: 10px !important;
    }
    #signin-form h2 {
        text-align: center;
        font-size: 18px !important;
    }
    #signin-form {
        margin: 8px !important;
    }
    #signin-form label {
        display: block;
        margin-bottom: 5px;
        font-size: 12px !important;
        text-align: left;
        position: relative;
        left: 15px;
    }
    #signin-form button {
        width: 95%;
        padding: 8px !important;
        background-color: rgb(74, 38, 158);
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 12px !important;
        margin-top: 0 !important;
    }
    #signin-form button:hover {
        background-color: rgba(255, 0, 128, 0.555);
        transition: all 0.2s ease-in-out;
    }
    p {
        text-align: center;    
        color: rgb(192, 192, 192);
        position: relative;
        top: 50px;
        font-size: 10px !important;
    }
}

#signin-form h2 {
text-align: center;
/* margin-bottom: ; */
margin-top: -20px;
font-size: 35px;
/* font-family:'Times New Roman', Times, serif; */
}

#signin-form label {
display: block;
margin-bottom: 5px;
/* font-weight: bold; */
font-size: 20px;
text-align: left;
position: relative;
left: 15px;
/* font-family:'Times New Roman', Times, serif; */
/* top: 2px; */
}

#signin-form input {
background: transparent;
color: white;
width: 90%;
padding: 10px;
margin-bottom: 15px;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 0.5px solid #929292;
/* border-radius: 4px; */
/* grid-row: center; */
/* align-content: center; */
}

/* .signin-form input:hover{
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid #ccc;
} */


#signin-form button {
width: 95%;
padding: 10px;
background-color: rgb(74, 38, 158);
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 20px;
margin-top: 8px;

}

#signin-form button:hover {
background-color: rgba(255, 0, 128, 0.555);
transition: all 0.2s ease-in-out;
}
/* .button1{
display: flex;
justify-content: space-between;
align-items: center;
} */
hr{
width: 100%;
border: 0;
background-color: rgba(140, 104, 151, 0.514);
height: 1px;
/* margin-top: px; */
position: relative; 
top: 20px;
}
p{
text-align: center;    
color: rgb(192, 192, 192);
/* padding: 10px; */
/* margin:10px; */
position: relative;
top: 50px;
font-size: 14px;
}
p a{
color: rgb(0, 157, 255);
text-decoration: none;
}
p a:hover{
text-decoration: underline;
}