<div id="body">
  <article id="main">
    <h1>Catch-22</h1>
    <hr class="down-arrow" />
    <p>“There was only one catch and that was Catch-22, which specified that a concern for one's safety in the face of dangers that were real and immediate was the process of a rational mind. Orr was crazy and could be grounded. All he had to do was ask; and as soon as he did, he would no longer be crazy and would have to fly more missions. Orr would be crazy to fly more missions and sane if he didn't, but if he was sane he had to fly them. If he flew them he was crazy and didn't have to; but if he didn't want to he was sane and had to. Yossarian was moved very deeply by the absolute simplicity of this clause of Catch-22 and let out a respectful whistle."</p>
  </article>
</div>

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700|Merriweather:400,300);

$first-font      : "Merriweather", serif;
$second-font      : "Montserrat", serif;

$white      : rgb(255,255,255);
$black      : rgb(0,0,0);
$blue 			: rgb(12,37,118);
$orange 		: rgb(231,173,72);
$tan	  		: rgb(206,170,96);
$brown			: rgb(178,142,80);
$beige 			: rgb(231,237,243);

$background-color: $beige;
$line-color: $tan;
$square-color: $white;
$triangle-color: $blue;


#body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100vw - 15px);
  min-height: calc(100vh - 15px);
  background: $background-color;
}

#main {
  width: calc(100% - 40px);
  max-width: 950px;
  
  h1 {
    font-family: $second-font;
    text: {
      align: center;
      transform: uppercase;
    }
  }
  
  p {
    font: {
      family: $first-font;
      size: 18px;
    }
    text-align: center;
    line-height: 1.5em
  }
}


.down-arrow {
	position: relative;
	display: block;
	width: calc(100% - 40px);
	max-width: 590px;
	margin: 0 auto 20px;
	height: 65px;
	border: none;
	box-shadow: inset 0 17px 0 0 $background-color, 
				inset 0 19px 0 0 $line-color, 
				inset 0 21px 0 0 $background-color, 
				inset 60px 32px 0 0 $background-color, 
				inset -60px 0 0 $background-color, 
				inset 0px 34px 0 0 $line-color, 
				inset 120px 44px 0 0 $background-color, 
				inset -120px 0 0 $background-color, 
				inset 0 46px 0 0 $line-color, 
				inset 0 65px 0 0 $background-color;

	// triangle & white background
	&:before {
		content: "";
		position: absolute;
		top: 26px;
		left: calc(50% - 8px);
		width: 0;
		height: 0;
		border-top: 10px solid $triangle-color;
		border-right: 7px solid $square-color;
		border-bottom: 4px solid $square-color;
		border-left: 7px solid $square-color;
		box-shadow: 0 0 0 13px $square-color;
	}
	
	// transparent background and shadow
	&:after {
		content: "";
		position: absolute;
		top: 9px;
		left: calc(50% - 24px);
		width: 37px;
		height: 37px;
		background: rgba($square-color,.2);
		border: 5px solid rgba($square-color,.2);
		box-shadow: 0 0 12px 0 rgba($black,.3);
	}
}