ModalSignupFormCSS.css

*{box-sizing: border-box}

/*for the inputs */
input[type=text], input[type=password] 
{
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    display: inline-block;
    border: none;
    background: #f1f1f1;
}

/* Background weird focus thing */
input[type=text]:focus, input[type=password]:focus {
    background-color: #ddd;
    outline: none;
}

/* Buttons */
button {
background-color: #4caf50;
color:white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;}

button:hover {
    opacity: 1;
}

/* Cancel Button */
.cancelbutton {
    padding: 14px 20px;
    background-color: red;
}

/* Cancel and Sign up buttons float with equal width */
.cancelbutton, .register {
    float: left;
    width: 50%;
}

/* padding for secondbox */
.secondbox {
    padding: 16px;
}
 /* padding for modal */
 .Modal {
     display: none;
     position: fixed;
     z-index: 1;
     left:0;
     right:0;
     top:0;
     width:100%;
     height:100%;
     overflow: auto;
     background-color: #474e5d;
     padding-top: 50px;


 }

 /* modal-content... */
 .Modal-Content{
     background-color: #fefefe;
     margin: 5% auto 15%; /* 5% top, 15% bottom centered! */
     border: 1px solid  #888;
     width:80%; 
 }

 /* hr */
 hr {
     border: 1px solid #f1f1f1;
     margin-bottom: 25px;
 }

 /* close button */
 .close {
     position: absolute;
     right: 35px;
     top: 15px;
     font-size: 40px;
     font-weight: bold;
     color: #f1f1f1;

 }
 .close:hover,
 .close:focus {
     color: #f44336;
     cursor: pointer; 
 }
 /* Clear Floats */
 .clearreset::after{
     content:"";
     clear: both;
     display: table;
    
 }