/******************************************
/* CSS
/*******************************************/

/* Box Model Hack */
*{
  box-sizing: border-box;
}

/******************************************
/* LAYOUT
/*******************************************/
img{
  display: block;
  margin: 0 auto;
}


/******************************************
/* ADDITIONAL STYLES
/*******************************************/
html, body {
	 height: 100%;
	 width: 100%;
   background: #121212
}
 body {
	 background-color: #121212;
	 position: relative;
	 margin: 0;
   color: #FFF;
   text-align: center;
}

h2 {
  width: 75%;
  padding: 20px;
  margin: 0 auto;
}

 .button {
	 box-shadow: 0px 15px 0 20px #352d2d, 0px 40px 0 30px #000;
	 cursor: pointer;
	 background-color: #842bbf;
	 position: absolute;
	 border-radius: 50%;
	 top: 50%;
	 left: 50%;
	 width: 480px;
	 height: 80px;
	 transform: translateX(-50%);
}
 .button::before {
	 content: '';
	 z-index: 1;
	 border-radius: 50%;
	 background-color: #b73ce7;
	 position: absolute;
	 bottom: 100%;
	 left: 0%;
	 transition: bottom 0.4s;
	 width: 480px;
	 height: 80px;
}
 .button::after {
	 content: '';
	 background-color: #842bbf;
	 position: absolute;
	 bottom: 50%;
	 left: 0%;
	 width: 480px;
	 height: 80px;
	 transition: height 0.4s;
}
 .button:active::before {
	 bottom: 10%;
}
 .button:active::after {
	 height: 10%;
}