.search {
  max-width: 38rem;
  padding: 2rem 0 0 0;
  margin: 0 auto;
  
  h1 {
    color: var(--f-color);
    font-size: 2.75rem;
    font-weight: 700;
    margin: 1rem 0;
    text-align: center;
  }

  form {
    padding: 1rem;

    .btn,
    .input input {
      background: var(--b-color);
      font-family: var(--p-font);
      border: .1rem solid var(--br-color);
      border-radius: var(--radius);
      box-shadow: none;
    }

    .input {
      display: inline-block;
      width: 72.5%;
      
      label {
        display: block;
        font-size: 1rem;
        font-weight: 400;
      }
      
      input {
        width: calc(100% - .5rem);
        font-size: 1rem;
        font-weight: 400;
        padding: .75rem 1rem;
        margin: .5rem 0 .75rem .5rem;
        outline: none;
        box-shadow: none;

        &::placeholder {
          color: var(--f-color);
          font-family: var(--p-font);
        }
      }
    }

    .btn {
      display: inline-block;
      width: 24%;
      color: var(--fs-color);
      font-size: 1rem;
      font-weight: 600;
      padding: .75rem 2rem .75rem 1rem;
      margin: 0 0 0 .75rem;
      box-shadow: none;
      text-align: center;

      &:hover {
        cursor: pointer;
        background: var(--brh-color);
      }

      span {
        position: absolute;
        margin: .2rem 0 0 .35rem;
      }
    }
  }
}