html,
body {
  height: 100%;
}
body {
  background-color: #b8d8c6;
  margin: 0;
  overflow: hidden;
}
p {
	font-size:20px;
}
.menu {
    font-family: 'Changa One', cursive;
    font-size: 300%;
    font-weight: bold;
    text-align: center;
}
.menu::before,
.menu::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.menu,
.menu::before,
.menu::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	transition: all .3s;
}
#box{
	width: 763px;
	height: 595px;
	margin: 100px auto;
	position: relative;
}

#canvas{
	width: 428px;
	height: 594px;
	position: absolute;
}

#hoshi{
	width: 428px;
	height: 594px;
	position: absolute;
}

#logo{
	width: 380px;
	height: 227px;
	position: absolute;
	top: 270px;
	left: 10px;
	background-image: url("../img/title.png");
}
#news{
	width: 154px;
	height: 33px;
	position: absolute;
	top: 250px;
	left: 427px;
	color:#7c4698;
}
#news:hover{
    top: 220px;
    font-size:450%;
}
#game{
	width: 154px;
	height: 33px;
	position: absolute;
	top: 307px;
	left: 460px;
	color: #efeb45;
}
#game:hover{
	color: #59b1eb;
}

#about{
	width: 250px;
	height: 50px;
	position: absolute;
	top: 363px;
	left: 438px;
	color: #e61f7e;
}
#about:hover {
	letter-spacing: 5px;
}

#member{
	width: 189px;
	height: 33px;
	position: absolute;
	top: 419px;
	left: 448px;
	color: #59b1eb;
}
#member:hover {
	-moz-transform: rotate(10deg);
    	-webkit-transform: rotate(10deg);
    	-o-transform: rotate(10deg);
    	-ms-transform: rotate(10deg);
	transform: rotate(10deg);
}
#blog{
	width: 100px;
	height: 42px;
	position: absolute;
	top: 477px;
	left: 434px;
	color: #6dbc5e;
}
#blog:hover {
	letter-spacing: 5px;
}

#contact{
	width: 170px;
	height: 34px;
	position: absolute;
	top: 534px;
	left: 410px;
	color: #e49149;
}
#contact:hover {
	-moz-transform: rotateY(360deg);
    	-webkit-transform: rotateY(360deg);
    	-o-transform: rotateY(360deg);
    	-ms-transform: rotateY(360deg);
	transform: rotateY(360deg);
}
@media screen and (max-width: 600px) {
	.menu {
		//font-size: 350%;
	}
}