@import 'Fonts';

.login {
  display: flex;
  flex-direction: column;
  max-width: 440px;
  margin-top: 120px;
  margin-right: auto;
  margin-left: auto;
  padding: 20px;

  >a>img {
    display: block;
    width: 156px;
  }

  >h1 {
    font-family: $roboto-slab;
    color: #2c2e3b;
    font-size: 25px;
    font-weight: 400;
    margin: 20px 0 0;
    line-height: 36px;
  }

  >h2 {
    margin-top: 20px;
    margin-bottom: 20px;
    font-family: $open-sans;
    color: #2c2e3b;
    font-size: 16px;
    line-height: 25px;
    text-align: left;
    font-weight: 400;
  }

  >form {
    display: flex;
    flex-direction: column;

    >input {
      height: 50px;
      margin-bottom: 10px;
      border-radius: 4px;
      font-family: $open-sans;
      color: #000;
      font-size: 15px;
      background-color: #ffffff;
      border: 1px solid #cccccc;
      padding: 8px 12px;
        outline: 0;

      &::placeholder {
        color: #999;
      }

      &:focus {
        border-color: #3898EC;
      }
    }

    >nav {
      display: flex;

      >button {
        display: block;
        margin-right: auto;
        padding: 14px 20px;
        border-radius: 6px;
        color: #fff;
        background-color: #36b074;
        font-family: $open-sans;
        font-size: 16px;
        font-weight: 600;
        text-align: center;
        border: 0;
        text-decoration: none;
        cursor: pointer;
        outline: 0;

        &:hover {
          background-color: #2a9e65;
        }
      }

      >nav {
        display: flex;
        flex-direction: column;
        text-align: right;

        >a {
          color: #36b074;
          font-weight: 600;
          margin-bottom: 3px;
        }
      }

    }
  }
}