@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

@font-face {
  font-family: Reckless;
  src: url(https://prowritingaid.blob.core.windows.net/cdn/reckless/Reckless-Bold.woff2);
  font-weight: 700;
}

@font-face {
  font-family: Reckless;
  src: url(https://prowritingaid.blob.core.windows.net/cdn/reckless/Reckless-Regular.woff2);
}

@font-face {
  font-family: Reckless;
  src: url(https://prowritingaid.blob.core.windows.net/cdn/reckless/Reckless-Light.woff2);
}

@font-face {
  font-family: Reckless;
  src: url(https://prowritingaid.blob.core.windows.net/cdn/reckless/Reckless-SemiBold.woff2);
  font-weight: 600;
}

body {
  background: #fbfbfc;
  color: #161d1a; /* fadedink */
  font-family: "Inter", sans-serif;
}

#docsSearch {
  background-color: #fcc4c5; /* pink-200 */
}

#docsSearch h1 {
  font-family: Reckless, sans-serif;
  font-weight: 600;
}

#searchBar button {
  color: #FEF9F6; /* brown50 */
  background: #161d1a; /* fadedink */
  border-radius: 6px;
  border: 2px solid transparent;
  font-size: 14px;
  padding: 0 24px;
  height: 40px;
  line-height: 20px;
}

#searchBar button:hover {
  color: #FEF9F6; /* brown50 */
  background-color: #161d1a; /* fadedink */
  text-decoration: none;
}

#searchBar .search-query {
  height: 40px;
}

/* Category Styles */
.category-list .category {
    background-color: #fff;
    background-position: top 20px center !important;
    background-repeat: no-repeat !important;
    background-size: 100px auto !important;
  margin: 8px;
  color: #106a9e; /*blue-500 editors marks */
  border-radius: 10px;
  min-height: 150px;
  box-shadow: 0 7px 4px -5px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  padding: 120px 20px 15px;
  position: relative;
  width: 31.5%;
  transition: all 0.2s;
}

.category-list .category:hover {
  color: #161d1a; /* fadedink */
  background-color: #F7EBE4; /* brown100 */
}

#serp-dd .result a, #serp-dd .result>li.active, #full-Article strong a, .collection a, .contentWrapper a, .most-pop-articles .popArticles a, .most-pop-articles .popArticles a span, .category-list .category .article-count, .category-list .category .article-count, .contentWrapper a {
  color: #161d1a; /* fadedink */
}

#serp-dd .result a:hover, #serp-dd .result > li.active, #fullArticle strong a, #fullArticle a strong, .collection a, .contentWrapper a, .most-pop-articles .popArticles a, .most-pop-articles .popArticles a:hover span, .category-list .category .article-count, .category-list .category:hover .article-count {
  color: #106a9e; /*blue-500 editors marks */
}

.contentWrapper h1 {
  font-family: Reckless, sans-serif;
  font-weight: 600;
}

#categoryHead h1 {
  font-family: Reckless, sans-serif;
  font-weight: 600;
}

#fullArticle .title {
  font-family: Reckless, sans-serif;
  font-weight: 600;
}

#fullArticle .callout-yellow {
  border-radius: 10px;
  border: 0;
}

/* Category Images */

/*
  Here is where you determine the images to be used just above each section of your Help Scout main page.
  You have to create one #category-xxx CSS selector for each separate category in your Help Scout collection.
  To get your category xxx number, simply visit the relevant category in your Help Scout docs and
  check the URL bar for the 3 digit category number.

  Then you have to specify an image located on a shared server somewhere on the internet that can
  serve up the images so Help Scout can display them.
*/


/* Getting Started */
#category-293 {
    background-image: url(https://a.storyblok.com/f/145420/1024x1024/2ce426704e/getting-started-small.png);
}

/* Account and Settings */
#category-54 {
  background-image: url(https://a.storyblok.com/f/145420/1024x1024/48c6e7fca2/account-settings-small.png);
}

/* Integrations */
#category-294 {
  background-image: url(https://a.storyblok.com/f/145420/1024x1024/a46f88acec/our-integrations-small.png);
}

/* Reports */
#category-53 {
    background-image: url(https://a.storyblok.com/f/145420/1024x1024/fb009202ac/the-reports-small.png);
  }

/* How-to Guides */
#category-110 {
    background-image: url(https://a.storyblok.com/f/145420/1024x1024/a9f362828b/how-to-guides-small.png);
  }

/* Billing and Subscription */
#category-89 {
    background-image: url(https://a.storyblok.com/f/145420/1024x1024/d29aeed02f/billing-subscription-smaller.png);
  }

/* Troubleshooting */
  #category-57 {
    background-image: url(https://a.storyblok.com/f/145420/1024x1024/138087dcda/troubleshooting-small.png);
  }

/* Trust and Safety */
#category-295 {
    background-image: url(https://a.storyblok.com/f/145420/1024x1024/0dd2b6b861/trust-and-safety-smaller.png);
  }

/* Resources */
#category-56 {
    background-image: url(https://a.storyblok.com/f/145420/1024x1024/d833e70b9c/resources-small.png);
  }

/* Novel Beginnings */
#category-391 {
    background-image: url(https://a.storyblok.com/f/145420/1217x1305/f6cea6cf69/06-submit.png);
  }

/* Novel November */
#category-355 {
    background-image: url(https://a.storyblok.com/f/145420/1217x1305/963ce04157/07-50k.png);
  }

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    /* Styles */
    .category-list .category {
        background-color: #fff;
        background-position: top 20px center !important;
        background-repeat: no-repeat !important;
        background-size: 100px auto !important;
      margin: 20px;
      color: #106a9e; /*blue-500 editors marks */
      border-radius: 10px;
      min-height: 150px;
      box-shadow: 0 7px 4px -5px rgba(0, 0, 0, 0.05);
      box-sizing: border-box;
      padding: 120px 20px 15px;
      position: relative;
      width: 85%;
      transition: all 0.2s;
  }