$colour: rgba(249, 146, 134, 1);

hr {
  margin: 1em 0;
}

hr:nth-of-type(1) {
  border: 0;
  height: 12px;
  background-image: 
    linear-gradient(115deg, 
      rgba(255,255,255,0) 0%, 
      rgba(255,255,255,0) 39%, 
      $colour 42%, 
      $colour 57%, 
      rgba(255,255,255,0) 60%, 
      rgba(255,255,255,0) 100%);
  background-size: 5px 12px;
}

hr:nth-of-type(2) {
  border: 0;
  height: 12px;
  background-image: 
    radial-gradient(ellipse at center, 
      $colour 0%,
      $colour 24%,
      rgba(255,255,255,1) 25%);
  background-size: 6px 6px;
}

hr:nth-of-type(3) {
  border: 0;
  height: 8px;
  background-image: 
    linear-gradient(45deg, 
      rgba(255,255,255,0) 0%, 
      rgba(255,255,255,0) 43%, 
      $colour 44%, 
      $colour 52%, 
      rgba(255,255,255,0) 53%, 
      rgba(255,255,255,0) 100%),
    linear-gradient(135deg, 
      rgba(255,255,255,0) 0%, 
      rgba(255,255,255,0) 43%, 
      $colour 44%, 
      $colour 52%, 
      rgba(255,255,255,0) 53%, 
      rgba(255,255,255,0) 100%);
  background-position: top left;
  background-size: 8px 8px;
}

hr:nth-of-type(4) {
  height: 4px;
  border: 1px solid $colour;
  border-width: 1px 0;
  background-image: 
    linear-gradient(135deg, 
      rgba(255,255,255,0) 0%, 
      rgba(255,255,255,0) 43%, 
      $colour 44%, 
      $colour 54%, 
      rgba(255,255,255,0) 55%, 
      rgba(255,255,255,0) 100%);
  background-position: top left;
  background-size: 6px 6px;
}

// Unimportant bits
body {
  margin: 0 auto;
  padding: 30px;
  max-width: 600px;
  color: #44388b;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

h1 {
  margin: 0 0 1.5em;
  font-size: 1.5em;
  text-align: center;
}