index.scss

@import '../../assets/scss/mixins.scss';

.search-container {
  text-align: center;
  .search-box {
    margin: auto;
    padding-top: 20px;

    .search-input {
      @include desktop() {
        font-size: var(--h3-md);
      }
      @include tablet() {
        font-size: var(--h3-sm);
      }
      @include mobile() {
        font-size: var(--h3-xs);
      }
      margin: 0.4rem 0;
      padding: 0.8rem;
      width: unquote('min(85vw, 500px)');
      border-radius: 20px;
      outline: none;
      text-align: center;
    }
    .paraphrase {
      color: var(--bg-amber-dark);
      @include desktop() {
        font-size: var(--h3-md);
      }
      @include tablet() {
        font-size: var(--h3-sm);
      }
      @include mobile() {
        font-size: var(--h3-xs);
      }
      .keyword {
        color: var(--h3-color);
      }
    }
  }
  .search-results {
    .title {
      color: var(--h2-color);
      @include desktop() {
        font-size: var(--h2-md);
      }
      @include tablet() {
        font-size: var(--h2-sm);
      }
      @include mobile() {
        font-size: var(--h2-xs);
      }
    }
  }
}