@import 'variables';
#page-content.pages-rlyweb,
#page-content.pages-rlytest {
  font-family: $helvetica;
  .rlyweb-container {
    min-height: 800px;
    text-align: center;
    .hero {
      max-width: 96%;
      margin-top: 100px;
      text-align: center;
      vertical-align: top;
      h1 {
        font-weight: 300;
        font-size: 50px;
      }
      .gen-form {
        display: inline-block;
        width: 400px;
        max-width: 96%;
        text-align: left;
        label {
          font-size: 12px;
        }
        input {
          width: calc(100% - 10px);
          padding: 8px 10px;
          font-size: 18px;
          margin-bottom: 5px;
          border: 1px solid rgb(194, 194, 194);
          border-radius: 2px;
          -webkit-appearance: none;
          &.error {
            border-color: rgb(236, 22, 87);
          }
        }
        select {
          display: block;
          width: calc(100% + 12px);
          -webkit-appearance: none;
          padding: 8px 10px;
          background: white;
          border-radius: 2px;
          margin-bottom: 15px;
          font-size: 18px;
          border: 1px solid rgb(194, 194, 194);
          color: rgb(52, 52, 52);
          background: url(https://i.imgur.com/VfIXRsi.png) no-repeat right #fff;
        }
        button {
          width: calc(100% + 12px);
          background: rgb(20, 175, 164);
          font-family: Palatino, 'Palatino Linotype', 'Palatino LT STD',
            'Book Antiqua', Georgia, serif;
          color: white;
          border: 0px;
          padding: 15px;
          font-size: 32px;
          cursor: pointer;
          -webkit-appearance: none;
          border-radius: 2px;
        }
      }
      .result {
        display: inline-block;
        width: 400px;
        max-width: 96%;
        vertical-align: center;
        text-align: center;
        padding-top: 60px;
        img {
          width: 300px;
          height: 420px;
          box-shadow: 7px 7px 30px rgba(64, 64, 64, 0.81);
        }
        a {
          display: inline-block;
          margin-top: 6px;
          padding: 10px 0px;
          width: 300px;
          background: rgb(34, 36, 38);
          color: white;
          border-radius: 5px;
        }
        @media screen and (min-width: 839px) {
          padding-top: 0px;
        }
      }
    }
    h4 {
      font-style: italic;
      font-family: Palatino, 'Palatino Linotype', 'Palatino LT STD',
        'Book Antiqua', Georgia, serif;
      width: 750px;
      max-width: 96%;
      text-align: center;
      margin: 150px auto 50px;
      font-size: 33px;
      line-height: 45px;
      &.ps {
        font-size: 20px;
        margin-top: 50px;
        line-height: 25px;
        width: 580px;
      }
    }
    hr {
      width: 60px;
      margin-top: -30px;
      opacity: 0.5;
    }
    .thanks {
      background: rgb(13, 3, 31);
      color: white;
      padding: 120px 10px 90px;
      font-family: Palatino, 'Palatino Linotype', 'Palatino LT STD',
        'Book Antiqua', Georgia, serif;
      h4 {
        display: block;
        margin-top: 10px;
      }
    }
    .usage {
      padding: 50px 0px;
      pre {
        width: 1000px;
        max-width: 96%;
        padding: 28px 10px 10px 0px;
        border-radius: 3px;
        margin: 20px auto;
        text-align: left;
        overflow-x: scroll;
        background: rgb(246, 246, 246);
        font-size: 16px;
        @media screen and (max-width: 600px) {
          font-size: 14px;
        }
      }
      .animal {
        width: 120px;
        display: inline-block;
        font-family: Palatino, 'Palatino Linotype', 'Palatino LT STD',
          'Book Antiqua', Georgia, serif;
        font-size: 26px;
        margin: 40px 22px;
        img {
          width: 100%;
        }
      }
      .color {
        height: 90px;
        width: 90px;
        margin: 20px;
        border-radius: 220px;
        color: white;
        display: inline-block;
        font-family: Palatino, 'Palatino Linotype', 'Palatino LT STD',
          'Book Antiqua', Georgia, serif;
        font-size: 30px;
        line-height: 90px;
      }
    }
    .slack {
      padding: 100px 20px;
      img {
        width: 150px;
      }
      h2 {
        font-weight: 300;
        font-size: 33px;
      }
      a {
        display: block;
        margin: 50px auto;
        background: rgb(224, 20, 63);
        color: white;
        width: 400px;
        padding: 40px 0px;
        max-width: 96%;
        font-size: 25px;
        border-radius: 12px;
      }
    }
  }
}
