@import "colours";

html, body {
  background-color: @main-bg;
}

span.help-block {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 500px;
  margin-left: -250px;
  margin-top: 210px;

  * {
    color: @danger-colour;
  }

  &.taller {
    margin-top: 320px;
  }
}

form {
  background-color: white;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 500px;
  margin-left: -250px;
  height: 550px;
  margin-top: -275px;
  text-align: center;
  border-radius: 4px;
  padding: 80px 0;
  box-sizing: border-box;

  &.taller {
    height: 750px;
    margin-top: -375px;
  }

  .title {
    font-family: 'Arvo';
    font-size: 70px;
    margin: 20px 0;
    margin-top: 0px;
    display: inline-block;
  }

  .email-wrap, .password-wrap, .name-wrap, .username-wrap {
    margin: 30px 0;
  }

  input[type="email"], input[type="text"], input[type="password"] {
    padding: 15px 20px;
    border: none;
    font-size: 13px;
    outline: none;
    width: 300px;
    box-sizing: border-box;
    color: #373737;
    text-align: center;
    transition-duration: 0.3s;
    border-bottom: 2px solid lighten(@accent, 40%);
    height: 50px;

    &::placeholder {
      text-align: center;
      opacity: 0.4;
    }

    &:focus {
      border-bottom: 2px solid @accent;

      font-size: 20px;
      text-align: left;

      &::placeholder {
        color: @main-bg;
      }
    }

    &:required:invalid {
      outline: none;
    }
  }
}
