@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300);

$color: #53e3a6;
.login.page {
  font-family: "Source Sans Pro", sans-serif;
  color: white;
  font-weight: 300;
  .wrapper {
    background: #50a3a2;
    background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
    background: -moz-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
    background: -o-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
    background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);

    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 400px;
    margin-top: -200px;
    overflow: hidden;

    &.form-success {
      form {
        opacity: 0;
        pointer-events: none;
      }
      .container {
        h1 {
          transform: translateY(85px);
        }
      }
    }
  }

  .container {
    max-width: 600px;
    margin: 0 auto;
    padding: 80px 0;
    height: 400px;
    text-align: center;

    h1 {
      font-size: 40px;
      transition-duration: 1s;
      transition-timing-function: ease-in-put;
      font-weight: 200;
    }
  }

  form {
    padding: 20px 0;
    position: relative;
    z-index: 2;
    transition: opacity 0.5s linear;

    input {
      display: block;
      appearance: none;
      outline: 0;
      border: 1px solid rgba(255, 255, 255, 0.4);
      background-color: rgba(255, 255, 255, 0.2);
      width: 250px;

      border-radius: 3px;
      padding: 10px 15px;
      margin: 0 auto 10px auto;
      display: block;
      text-align: center;
      font-size: 18px;

      color: white;

      transition-duration: 0.25s;
      font-weight: 300;

      &:hover {
        background-color: rgba(255, 255, 255, 0.4);
      }

      &:focus {
        background-color: white;
        width: 300px;

        color: $color;
      }
    }

    button {
      appearance: none;
      outline: 0;
      background-color: white;
      border: 0;
      padding: 10px 15px;
      color: $color;
      border-radius: 3px;
      width: 250px;
      cursor: pointer;
      font-size: 18px;
      transition-duration: 0.25s;

      &:hover {
        background-color: rgb(245, 247, 249);
      }
    }
  }
}