span {
    content: '';
    height: 5px;
    position: fixed;
    left: 0;
    width: 0%;
    background: #F84BA2;
  }
  
  ::selection {
    color: #fff;
    background: #FFA318;
    text-shadow: none;
  }
  
  p {
    margin: 1.6em 0;
  }
  
  hr {
    margin: 2em 0;
    text-align: center;
    line-height: 1px;
    height: 1px;
    background: #ddd;
    border: 15px solid #fff;
    border-left: 0;
    border-right: 0;
    font-size: 1.5em;
  }
  hr:after {
    content: attr(txt);
    color: #ddd;
    display: inline;
    background: #fff;
    padding: .2em .5em;
    border: 1px solid #fff;
    border-radius: 100px;
    transition: .3s ease all;
  }
  hr:before {
    position: absolute;
    content: '';
    background: transparent;
    border-spacing: 10px;
    margin-top: -24px;
    margin-left: 1px;
    width: 49px;
    height: 49px;
    transition: .3s ease-out all;
    border-radius: 100px;
  }
  hr:not(.heart):hover:after {
    border: 1px solid #ddd;
  }
  hr:not(.heart):hover:before {
    background: #ddd;
    transition: 3s cubic-bezier(0.5, -0.74, 0.79, 1.53) all;
  }
  hr.heart:after {
    color: #F84BA2;
    padding: .2em .4em;
  }
  
  article {
    margin: 0 auto;
    padding: 40px 11.14%;
    word-break: break-word;
    hyphens: auto;
  }
  article p:first-of-type:first-letter {
    float: left;
    font-size: 5.7rem;
    line-height: 6.5rem;
    margin: 0 10px 0 0;
  }
  article p:not(:first-of-type) {
    text-indent: 1.4em;
  }
  
  h4 {
    color: #ddd;
    font-size: .8em;
    letter-spacing: .51px;
    text-align: center;
    margin: -1.7em auto 3em;
    font-style: italic;
  }
  
  h2 {
    font-size: 7.4rem;
    font-weight: 600;
    text-align: center;
    font-size: 4.2rem;
    line-height: 10rem;
  }
  
  @media only screen and (max-width: 700px) {
    article {
      font-size: .85em;
      line-height: 1.7em;
      margin-bottom: 30px;
      padding: 8%;
    }
    article p:first-of-type:first-letter {
      font-size: 4.6rem;
      line-height: 5.2rem;
      margin: 0 10px 0 0;
    }
  
    h2 {
      font-size: 3.5rem;
      line-height: 3.5em;
      letter-spacing: 0;
    }
  
    h4 {
      letter-spacing: .3px;
      margin: -2.7em auto 4em;
    }
  }
  @media only screen and (max-width: 502px) {
    article {
      width: auto;
      font-size: .8em;
      line-height: 1.6em;
    }
    article p:first-of-type:first-letter {
      font-size: 4rem;
      line-height: 4.5rem;
      margin: 0 6px 0 0;
    }
  
    h2 {
      font-size: 2.4rem;
      line-height: 1.4em;
      letter-spacing: 0;
    }
  
    h4 {
      letter-spacing: 0;
      margin: .4em auto 3em;
    }
  }