<style type="text/css">
body {
    font-family: "Arial", sans-serif;
}
h1,h2,h3,h4,h5,h6 {
    font-family: "Arial", sans-serif;
    }
/ Full-width input fields /
input[type=email],
input[type=text] {
    padding: 15px;
    width; 100%;
    margin: 5px 950px 22px 641px;
    display: inline-block;
    border: none;
    background: #f1f1f1;
}
input[type=email]:focus, input[type=text]:focus {
     background-color: #ddd;
     outline: none;
}
.text-design{
    font-family: "Arial", sans-serif;
    letter-spacing: .01em;
    font-weight: normal;
    font-size: 17px;
}
.text-margins {
 margin-left: auto;
 margin-right: auto;
 width: 80%;
 display: block;
 text-align: -webkit-auto;; /* For Edge */
 -moz-text-align-last: -webkit-auto;; /* For Firefox prior 58.0 */
 text-align-last: left;
}
.text-btn {
 margin-left: auto;
 margin-right: auto;
 display: block;
 text-align: -webkit-auto;; /* For Edge */
 -moz-text-align-last: -webkit-auto;; /* For Firefox prior 58.0 */
 text-align-last: left;
 font-weight : bold;
 margin-right: 39%;
 padding-right: 40px;
 padding-left: 40px;
 height: 45px;
 background-color: #808080;
 border: none;
 color: white;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 font-size: 16px;
}
.new-pick{
 height: 35px;
 width: 100%;
 margin-top: 3.5px;
}
.new-email{
 height: 30px;
 width: 100%;
 margin-top: 3.5px;
  }
.backgr{
 background: #F5F5F5;
}
.hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
/ Set a style for all buttons /
.button {
background-color: #A9A9A9 ;
color: white;
padding: 14px 20px;
border: none;
cursor: pointer;
width: 7%;
opacity: 0.9;
}
.button:hover {
opacity:1;
}
/ Extra styles for the cancel button /
.cancelbtn {
padding: 14px 20px;
background-color: #f44336;
}
/ Customize the label (the container) /
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/ Hide the browser's default checkbox /
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/ Create a custom checkbox /
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/ On mouse-over, add a grey background color /
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/ When the checkbox is checked, add a blue background /
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/ Clear floats /
.clearfix::after {
content: "";
clear: both;
display: table;
}
/* media queries */
@media only screen and (min-width: 40.063em){
    .text-margins {
        width: 37%; /* width of content for medium to large devices */
    }
}
/ Change styles for cancel button and signup button on extra small screens /
@media screen and (max-width: 300px) {
.cancelbtn, .signupbtn {
width: 100%;
}
}
</style>