html,body {margin:0;padding:0;height:100%; font-family:Verdana;}
.Page {
	display:flex;
	height:100%;
	flex-direction:column;
	align-items: stretch;
}
.Header {
	width:100%;
	padding: 1% 0;
	background:#9500bf;
	flex-grow: 0;
}
.Logo-Link {
	display:inline-block;
	width: 10%;
	text-align:center;
	vertical-align:middle;
}
.Logo {
	display:block;
	width:63%;
	margin: 0 auto;
}
.Menu {
	display:inline-block;
	width: 89%;
	text-align: right;
	vertical-align:middle;
}
.Menu-Link {
	margin: 0 2%;
	color: #FFF;
	font-size:3vw;
	text-decoration: none !important;
	transition: color 1s;
}
.Menu-Link:hover, .Menu-Link:active {
	color: #ffc700;
}
.Content {
	width: 100%;
	flex-grow: 8;
}
.Gradient {
	background: hsla(47, 100%, 50%, 1);
	background: radial-gradient(circle, hsla(47, 100%, 50%, 1) 0%, hsla(33, 100%, 50%, 1) 100%);
	background: -moz-radial-gradient(circle, hsla(47, 100%, 50%, 1) 0%, hsla(33, 100%, 50%, 1) 100%);
	background: -webkit-radial-gradient(circle, hsla(47, 100%, 50%, 1) 0%, hsla(33, 100%, 50%, 1) 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#FFC700", endColorstr="#FF8C00", GradientType=1 );
}

.Home-Title {
	display: block;
	width: 80%;
	margin: 2% auto;
	text-align: center;
	font-size: 4.5vw;
}
.Home-Side {
	display:inline-block;
	width: 50%;
	margin: 0 auto;
	vertical-align:middle;
}
.Home-IMG {
	display: block;
	width: 39%;
	margin: 0 auto;
	animation: bounce 2s alternate infinite ease-out;
}
.Home-Text {
	display: block;
	width: 76%;
	text-align:center;
	font-size: 2vw;
}

.Friend-Side {
	display:inline-block;
	margin: 3% 0 0;
	vertical-align:middle;
}
.Friend-Left {
	width:60%;
}
.Friend-Right {
	width:40%;
}
.Friend-Canvas {
	display:block;
	margin: 0 auto;
	background: #9500bf;
}
.Friend-Title {
	text-align: center;
	color: #FFF;
	font-size: 3vw;
}
.Friend-Button {
	display: block;
	width: 50%;
	margin: 5% auto;
	padding: 1% 0;
	background: #FFF;
	color: #ffc700;
	text-align: center;
	font-size: 3vw;
	border-radius: 21px;
	transition:color 1s;
	cursor:pointer;
	-webkit-user-select: none;
	user-select: none;
}
.Friend-Button:hover, .Friend-Button:active {
	color: #000;
}

.About-Title {
	display: block;
	margin: 2% 0;
	text-align: center;
	font-size: 3vw;
}
.About-Side {
	display: inline-block;
	width: 40%;
	margin: 0 auto;
	vertical-align: middle;
}
.About-Side-Small {
	display: inline-block;
	width: 20%;
	margin: 0 auto;
	vertical-align: middle;
}
.About-Text {
	padding: 0 15%;
	text-align: center;
	font-size: 1.5vw;
}
.About-IMG {
	display: block;
	width: 75%;
	margin: 0 auto;
}

.Game-Background {
	position:relative;
	height:100%;
	background: #010101;
}
.Game-Back-IMG {
	display: block;
	width: 7%;
	margin: 0 0 0 3%;
	padding: 1% 0 0;
}
.Game-Frame {
	position:absolute;
	display: block;
	margin: 0 auto;
	left:0;
	right:0;
	top: 50%;
	transform: translateY(-50%);
	border: none;
}

@keyframes bounce {
	0% { transform: translateY(0); }
	100% { transform: translateY(-20px);} 
}

@media only screen and (max-width: 1190px) and (min-width: 850px) {
	.Home-IMG {width: 50%;}
	.Home-Text {font-size: 2.5vw;}
	.Home-Side {margin: 5% auto 0;}
	
	.Friend-Canvas {width: 95%;}
	.Friend-Side {margin: 10% 0 0;}
	
	.About-Title {font-size: 4.5vw;}
	.About-Side {margin: 4% auto 0;}
	.About-Text {padding: 0 11%; font-size: 2.5vw;}
	.About-IMG {width: 100%;}
	
	.Game-Back-IMG {width: 5%;}
}

@media only screen and (max-width: 850px) {
	.Header {padding: 4% 0;}
	.Logo-Link {display: block; width: 100%; text-align: center;}
	.Logo {width: 15%;}
	
	.Menu {display: block; width: 100%; margin: 4% auto 0; text-align: center;}
	.Menu-Link {font-size: 6vw;}
	
	.Home-Title {width: 100%; margin: 8% auto; font-size: 8.5vw;}
	
	.Home-Side {width: 100%;}
	.Home-Text{width: 80%; margin: 6% auto; font-size: 5vw; text-align: center;}
	
	.Friend-Left, .Friend-Right {display: block; width: 100%; margin: 0 auto;}
	.Friend-Canvas {width: 90%; margin: 15% auto 0; border-radius: 13px;}
	.Friend-Title {margin: 5% 0; font-size: 7vw;}
	.Friend-Button {width: 78%; padding: 3% 0; font-size: 7vw;}
	
	.About-Title {margin: 4% 0 0; font-size: 11vw; }
	.About-Side {display: block; width: 90%; margin: 0 auto;}
	.About-Side-Small {display: block; width: 90%; margin: 0 auto;}
	.About-IMG {width: 55%; margin: 0 auto;}
	.About-Text {padding: 5% 0; font-size: 5vw;}
	
	.Game-Background {position: relative; width: 100%; height: 100vh; margin: 0 0 -2%; padding: 2% 0 0; background: #000;}
	.Game-Back {position: absolute; width: 8%; top: 3%; left: 2%; z-index: 52;}
	.Game-Back-IMG {display:block; width: 100%;}
	.Game-Frame {position: relative; display:block; width: 76%; height: 90%; margin: 0 auto 0; z-index: 20;}
}