/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

.blog-post-content-wrapper {
  display: flex;
  max-width: 1152px;
  width: 100%;
  
  margin: 0 auto;
  margin-top: 56px;
}

.blog-post-content-wrapper .scroller-wrapper {
  position: relative;
  padding-right: 44px;
  max-width: 360px;
  width: 100%;
}

.blog-post-content-wrapper .scroller {
  text-align: left;
  position: sticky;
  top: 140px;
}

.blog-post-content-wrapper .scroller .scroller-title {
  color: #131E2D;
  font-size: 1.5rem;
  line-height: 32px;
  font-weight: 500;
  margin-bottom: 24px;
}

.blog-post-content-wrapper .scroller .anchor-link {
  position:relative;
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  
  color: #6C7483;
  font-size: 1rem;
  line-height: 30px;
  font-weight: 500;
}

.blog-post-content-wrapper .scroller .anchor-link.active {
  color: #131E2D;
}

.blog-post-content-wrapper .scroller .anchor-link:before {
  content:'';
  display: block;
  margin-top: 11px;
  max-width: 8px;
  width: 100%;
  height: 8px;
  background-image: url('data:image/svg+xml,<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="4" cy="4" r="4" fill="url(%23paint0_linear_6602_477)"/><defs><linearGradient id="paint0_linear_6602_477" x1="4" y1="0" x2="4" y2="8" gradientUnits="userSpaceOnUse"><stop stop-color="%2314C8C8"/><stop offset="1" stop-color="%2399F9F9"/></linearGradient></defs></svg>');
}


.blog-post-content-wrapper .content {
  text-align: left;  
  padding-left: 44px;
  max-width: 800px;
  width: 100%;
  border-left: 1px solid #D1D5DB;
}

@media only screen and (max-width: 987px) {
  .blog-post-content-wrapper {
    flex-direction: column;
    max-width: 100%;
  }
  
  .blog-post-content-wrapper .scroller-wrapper {
    position: relative;
    padding-right: 0;
    padding-bottom: 34px;
    max-width: 100%;
  }

  .blog-post-content-wrapper .scroller {
    position: relative;
    top: 0;
  }
  
  .blog-post-content-wrapper .content {
    padding-left: 0;
    max-width: 100%;
    padding-top: 34px;
    border-top: 1px solid #D1D5DB;
    border-left: none;
  }
}

/* test styles */

.test-template h1,
.test-template h2,
.test-template h3,
.test-template h4,
.test-template h5,
.test-template h6 {
  color: #131E2D;
}

.test-template h1,
.test-template h2,
.test-template h3,
.test-template h4{
  font-weight: 700;
}

.test-template h5,
.test-template h6
  font-weight: 500;
}

.test-template h1 {
  font-size: 64px;
  line-height: 120%;
}

.test-template h2 {
  font-size: 42px;
  line-height: 120%;
}

.test-template h3 {
  font-size: 32px;
  line-height: 120%;
}

.test-template h4 {
  font-size: 28px;
  line-height: 130%;
}

.test-template h5 {
  font-size: 24px;
  line-height: 130%;
}

.test-template h6 {
  font-size: 20px;
  line-height: 140%;
}

.test-template p,
.test-template a,
.test-template p a {
  font-size: 18px;
  line-height: 150%;
  font-weight: 400;
  color: #6C7483;
}

.test-template a,
.test-template p a {
  color: #3B82F6;
  text-decoration: none;
}

.test-template a:hover,
.test-template p a:hover {
  text-decoration: underline;
}

.test-template blockquote,
.test-template p blockquote,
.test-template blockquote p {
  font-size: 22px;
  line-height: 150%;
  font-weight: 500;
  color: #131E2D;
}