html,
body {
  min-height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: "Quicksand, Dosis", sans-serif;
  background-color: white;
}

#content { background: #64C7F3; }
h1 {
  color: #4f4f4f;
  font-size: 1.5rem;
  margin: 1.5rem 1rem 1.5rem;
}
.login { background: white;border-radius: 10px; }
.login .logo img {
  width: 100px;
  margin: 30px;
}
.login-form {
  margin-top: 50px;
  padding-bottom: 50px;
}

.register-form {
  margin-top: 0px;
  padding-bottom: 50px;
}

.email-form {
  margin-top: 50px;
}

.login-card {
  min-height: 100vh;
  display: block;
  padding: 173px 0px 55px;
}

.login-title {
  margin-left: 192px;
}

@media only screen and (max-width: 600px) {
  .login-title {
    margin-left: 0;
  }

  .login-form {
    margin-top: 0;
  }
}

.register-title {
  margin-left: 150px;
}

@media only screen and (max-width: 600px) {
  .register-title {
    margin-left: 0;
  }

  .register-form {
    margin-top: 0;
  }

  .login-card {
    padding: 55px 5px;
  }
  .login {
    background: white;
    border-radius: 10px;
    padding: 30px;
  }
}

.email-title {
  margin-left: 150px;
}

@media only screen and (max-width: 600px) {
  .email-title {
    margin-left: 0;
  }
}

.login-wrapper {
  margin-top: 800px;
}

.login-wrapper h1 {
  color: white;
}

.background {
  background: #667db6;
  /* fallback for old browsers */
  /* Chrome 10-25, Safari 5.1-6 */
  background: -webkit-gradient(linear, left top, right top, from(#667db6), color-stop(#0082c8), color-stop(#0082c8), to(#667db6));
  background: linear-gradient(to right, #667db6, #0082c8, #0082c8, #667db6);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background-image: url(https://www.harendekrant.nl/wp-content/uploads/2017/06/Juni27-brinkschool.jpg);
  background-size: cover;
  background-position: bottom;
}