@font-face {
	   font-family: KouzanMouhituFontOTF;
	   src: url("../font/KouzanMouhituFontOTF.otf");
	}
body
{
background-image:url("../image/black.png");
background-size: cover;
background-position:center;
animation:black 3s;
animation-iteration-count:infinite;
}
 @keyframes black
 {
  from {
 background-image:url("../image/black2.png");
 }
 to {
 }
 }
.moon
{
position:absolute;
top:14%;
border-radius: 50%;
}
.top
{
position:absolute;
top:-2%;
left:-5%;
}
h1
{
position:absolute;
color:#FFE4B5;
font-size:43px;
left:2%;
top:4%;
font-family:"標楷體";
text-shadow: 2px 2px 4px black;
font-family:KouzanMouhituFontOTF;
}
h2
{
position:absolute;
color:#FFE4B5;
font-size:36px;
left:8%;
top:11%;
font-family:"標楷體";
text-shadow: 2px 2px 4px black;
font-family:KouzanMouhituFontOTF;
}
.otherside
{
position:absolute;
background:#006000;
border:solid 2px black;
border-radius:10px;
width:25%;
height:240px;
left:60%;
top:20%;
box-shadow: inset 2px 2px white;
}

.bor
{
position:absolute;
border:solid 2px gray;
border-radius:10px;
width:27%;
height:280px;
left:59%;
top:15%;
box-shadow: inset 2px 2px white;
color:rgba(255, 0, 0, 0); 
}
a
{
color:#00EC00;
text-decoration:none;
font-width:bold;
font-size:22px;
}
li
{
padding-bottom:15px;
}
.light
{
position:absolute;
left:55%;
top:0%;
width:180px;
animation:light 2s;
animation-iteration-count:infinite;
animation-direction:alternate;
}
.light2
{
position:absolute;
left:55%;
top:0%;
width:180px;
}
 @keyframes light
 {
  from {
opacity: 0;
 }
 to {
 }
 }
.face
{
position:absolute;
left:75%;
top:24%;
width:80px;
background-image:url('../image/face.png');
background-size:100% 100%;
color:rgba(255, 0, 0, 0); 
height:70px;
}
.face:hover
{
background-image:url('../image/face3.png');
}
.talking
{
position:absolute;
left:75%;
top:33%;
color:#00EC00; 
height:70px;
}
.rb
{
position:absolute;
left:62%;
top: 52%;
width:80px;
background-image:url('../image/rb.png');
background-size:100% 100%;
color:rgba(255, 0, 0, 0); 
height:70px;
}
.rb:hover
{
background-image:url('../image/rb2.png');
}
.bb
{
position:absolute;
left:70%;
top: 52%;
width:80px;
background-image:url('../image/bb.png');
background-size:100% 100%;
color:rgba(255, 0, 0, 0); 
height:70px;
}
.bb:hover
{
background-image:url('../image/bb2.png');
}
.yb
{
position:absolute;
left:78%;
top: 52%;
width:80px;
background-image:url('../image/yb.png');
background-size:100% 100%;
color:rgba(255, 0, 0, 0); 
height:70px;
}
.yb:hover
{
background-image:url('../image/yb2.png');
}
.bigclock
{
position:absolute;
left:75%;
top:-1%;
width:100px;
background-image:url('../image/bigclock.png');
background-size:100% 100%;
color:rgba(255, 0, 0, 0); 
height:100px;
}
.bigclock:hover
{
background-image:url('../image/bigclock3.png');
}
.sclock
{
position:absolute;
left:70%;
top:2%;
width:60px;
background-image:url('../image/sclock.png');
background-size:100% 100%;
color:rgba(255, 0, 0, 0); 
height:60px;
}
.sclock:hover
{
background-image:url('../image/sclock2.png');
}
.paper
{
position:absolute;
left:88%;
top:3%;
width:160px;
font-size:22px;
line-height: 1.5em;
background-image:url("../image/paper.png");
color:rgba(255, 0, 0, 0); 
height:170px;
}
.pi:hover
{
background-color:#FFFFBB;
padding-top:4px;
padding-bottom:4px;
color:black;
font-family:KouzanMouhituFontOTF;
}
.lar
{
position:absolute;
left:87%;
top:32%;
width:160px;
background-image:url('../image/lar.png');
background-size:100% 100%;
color:rgba(255, 0, 0, 0); 
height:120px;
}
.lar:hover
{
background-image:url('../image/lar1.png');
}
.carry
{
position:absolute;
left:87%;
top:55%;
width:120px;
background-image:url('../image/carry.png');
background-size:100% 100%;
color:rgba(255, 0, 0, 0); 
height:70px;
}
.carry:hover
{
background-image:url('../image/carry2.png');
}
.scp1
{
position:absolute;
left:89%;
top:67%;
width:100px;
background-image:url('../image/scp1.png');
background-size:100% 100%;
color:rgba(255, 0, 0, 0); 
height:120px;
}
.scp1:hover
{
background-image:url('../image/scp12.png');
}
.book
{
position:absolute;
left:70%;
top:70%;
width:280px;
font-size:18px;
line-height: 1.5em;
background-image:url("../image/book.png");
background-size:100% 100%;
color:rgba(255, 0, 0, 0); 
height:170px;
}
.coffee
{
position:absolute;
left:60%;
top:70%;
width:150px;
background-image:url('../image/coffee.png');
background-size:100% 100%;
color:rgba(255, 0, 0, 0); 
height:120px;
}
.coffee:hover
{
background-image:url('../image/coffee2.png');
}
.log
{
animation:log 0.5s;
animation-iteration-count:infinite;
animation-direction:alternate;
}
 @keyframes log
 {
  from {
opacity: 0;
 }
 to {
 }
 }
 .to:hover
 {
 color:#228B22;
 }
 	.topimg
	{
	width:150px;
	position:absolute;
	top:3%;
	left:3%;
	opacity: 0.3;
	}