main.css

/* Note the 3 values after padding: 
in order, they set the top, left and right, and bottom sizes. 
You will see this format used in a few more places. */
body {
  background: #298eea;
  font-family: "Roboto", helvetica, sans-serif;
  padding: 60px 0 0;
  margin: 0;
  font-size: 18px;
}

body * {
  box-sizing: border-box;
}

/* Potentially tricky: fieldset comes with default styles we must override. */
fieldset {
  padding: 0;
  border: 0;
  margin: 0;
}

.logo {
  display: block;
  width: auto;
  height: 35px;
  margin: 0 auto 30px;
}

.signup-form {
  width: 400px;
  padding: 40px;
  border-radius: 3px;
  background: white;
  margin: 0 auto;
}

.signup-form legend {
  width: 100%;
  line-height: 38px;
  font-size: 35px;
  font-weight: 300;
  color: #565656;
  text-align: center;
  letter-spacing: 0;
  margin: 0 auto 45px;
}

/* The button ultimately gets a different background
color below, but it largely overlaps with email/password
input styling, so we include it in the same style block, then
override parts of it in its own declaration. */
input[type="email"],
input[type="password"],
button[type="submit"] {
  display: block;
  width: 100%;
  height: auto;
  font-size: 18px;
  text-align: left;
  padding: 15px;
  border: 2px solid #e7e7e7;
  border-radius: 3px;
  background: #fcfcfc;
  margin: 10px auto 20px;
  transition: opacity 0.4s;
}

button[type="submit"] {
  height: auto;
  font-size: 22px;
  font-weight: 500;
  text-align: center;
  color: white;
  background: #15CD72;
  border: 0;
  cursor: pointer;
  margin-bottom: 0;
  
}

/* Tricky! A Firefox bug makes our focus outlines disappear,
  so we have to restore them ourselves. This focus outline is an
  a11y MUST for keyboard users! Note that we are NOT expecting you 
  to know this. You can read more about the issue & the fix at: 
  
  https://thinkful-ed.github.io/firefox-focus-bug-demo/
  */
input[type="email"]:focus,
input[type="password"]:focus,
button[type="submit"]:focus {
 /* Restore desirable focus behavior 
 in non-webkit browsers like Firefox */
 outline: auto 2px #87ceeb;
 /* Preseve default focus behavior in webkit browsers */
 outline: auto 5px -webkit-focus-ring-color;
 box-shadow: 0;
}


button[type="submit"]:hover,
button[type="submit"]:focus {
  background-color: #0CB863;
  -webkit-transition: background 0.1s;
  -moz-transition: background 0.1s;
  -o-transition: background 0.1s;
  transition: background 0.1s;
}

.signup-form p {
  font-size: 16px;
  text-align: center;
  margin: 10px 0 0;
  color: #696969;
}

.signup-form a {
  color: #999;
  text-decoration: none;
  border-bottom: 1px solid #bbb;
}

.signup-form a:hover {
  border-color: #999;
  color: #777;
}

/* footer */
.footer {
  text-align: center;
  color: white;
  margin: 20px auto;
  font-weight: 600;
  border: 0;
  padding: 0;
}

.footer a {
  color: white;
}

.footer a:hover {
  color: #E7F1F9; 
}