*
{
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}

body {
	height: 100%;
	overflow: hidden;
}


/** All page content to be scaled **/
#contains_all {
	width: 1000px;
	height: 580px;
}

.fixed_scaled {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform-origin: left top;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
  transform-origin: left top;
}

img { width: 100%; }

/** illustration & animation **/
#marcus {
	z-index: 0;
	position: absolute;
	top: -1%;
	left: 0%;

	animation-name: marcusMove;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

#fion {
	z-index: 1;
	position: absolute;
	width: 40px;
	top: 30%;
	left: 45%;
}

#heroHand {
	z-index: 1;
	position: absolute;
	width: 25%; 
	//left: 0px;
	animation-name: handMove;
	animation-duration: 1.2s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
		
}

#heroBody {
	z-index: 2;
	position: absolute;
	top:0%;
	left: 0px;
	height:100%;
	width: 35%;
	//min-height: 105%;
	animation-name: bodyMove;
	animation-duration: 1.8s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

#mask {
	z-index: 3;
	position: absolute;
	top: 0%;
	left: 0%;
}


@keyframes bodyMove {
	from {top: 0px;}
	to {top: -10px;}
}

@keyframes handMove {
	from {top:200px;left:90px;}
	to {top: 210px;left:100px;}
}

@keyframes marcusMove {
	from {transform: rotate(0deg);}
	to {transform: rotate(-0.5deg);}
}


header {
	position: absolute;
	text-align: center;
	width: 100%;
	margin-top:40px;
	z-index: 4;
}

#logo {
	width: 120px;
}

#logo-block {
	width: 100%;
}


#quotes-wrapper {
	position: absolute;
	top: 12%;
	height:400px;
	width: 100%;
	text-align: center;
	z-index: 4;
}


#tagline, #tagline2 {
	position: absolute;
	width: 100%;
	color: white;
	font-family: 'Carter One', cursive;
	font-size: 5em;
    text-shadow: 2px 2px 8px black;​
}



/** button & feature **/
footer {
	height: 20%;
	width: 100%;
	position: absolute;
	top: 65%;
	display: flex;
	flex-direction: column;
}
	
#button_position {
	z-index: 4;
	text-align: center;
	width: 100%;
}

#feature {
	width: 100%;
	height: 50px;
	text-align: center;
	z-index: 4;
	//color: white;
	background: -webkit-linear-gradient(#eee, #992299);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	font-size: 20px;
	font-weight: bold;
	font-family: 'Bree Serif', serif;

	letter-spacing: 1px;
	margin-top: 10px;
		
}

.button_design {
	width: 200px;
	height: 70px;
	font-size: 30px;
	line-height: 0px;
	font-family: 'Carter One', cursive;
	text-decoration: none;
	text-align: center;
  background: #057;
  background: -webkit-linear-gradient(-90deg,#992299 0,#882288 50%,#550055 51%,#992299 100%);
  background: -moz-linear-gradient(180deg,#992299 0,#882288 50%,#550055 51%,#992299 100%);
  background: linear-gradient(180deg,#992299 0,#882288 50%,#550055 51%,#992299 100%);
	color: #fff;
	padding: 10px 20px;
	border: 1px solid;
	border-radius: 12px;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
  border: 1px solid #882288;
	-webkit-box-shadow: -1px 2px 1px 1px rgba(255,255,255,0.8) inset, 1px -2px 1px 3px #057 inset, 0 3px 3px 0 rgba(0,51,68,0.7);
  box-shadow: -1px 2px 1px 1px rgba(255,255,255,0.8) inset, 1px -2px 1px 3px #550055 inset, 0 3px 3px 0 rgba(68,0,68,0.7);
  background-image: linear-gradient(180deg,rgba(204,68,204,0.53) 0,rgba(153,34,153,0.53) 50%,rgba(136,34,136,0.53) 51%,rgba(204,68,204,0.53) 100%) !important;
    animation: pink_button_glow 600ms linear 0s infinite normal;
}

@keyframes pink_button_glow {
  0% {
    background-color: #992299;
    border-color: #550055;
  }
  50% {
    background-color: #cc44cc;
    border-color: #cc44cc;
  }
  100% {
    background-color: #992299;
    border-color: #550055;
  }