body {
    font-family: Arial, Helvetica, sans-serif;
}

* {
    box-sizing: border-box
}

/* Full-width input fields */
input[type=text], option {
    width: 100%;
    padding: 12px;
    margin: 5px 0 22px 0;
    display: inline-block;
    border: gray 1px solid;
}

input[type=text]:focus {
    background-color: #ddd;
    outline: none;
}

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

/* Set a style for submit button */
.signupbtn {
    background-color: lightgray;
    color: black;
    font-weight: bold;
    padding: 14px 20px;
    margin: 8px 0;
    border: gray 1px solid;
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
    background-image: linear-gradient(180deg, lightgray, gray);

}

.signupbtn:hover {
    opacity: 1;
    background-image: linear-gradient(180deg, #ff000071, gray);

}

/* Float cancel and signup buttons and add an equal width */
/* ..signupbtn {
  float: left;
  width: 50%;
}  */

/* Clear floats */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 300px) {
    .signupbtn {
        width: 100%;
    }
}

.linkbtn {
    background-color: lightgray;
    color: black;
    font-weight: bold;
    padding: 12px;
    margin-bottom: 12px;
    border: gray 1px solid;
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
    background-image: linear-gradient(180deg, lightgray, gray);

}

.linkbtn:hover {
    opacity: 1;
    background-image: linear-gradient(180deg, #ff000071, gray);
}

.textBox {
    border: black 1px solid;
    padding: 0 6px 0 6px;
    margin-bottom: 12px;
    background-color: white;
}