body{
padding:0;
margin:0;
font-family: 'Aldrich', sans-serif;
background:black;
color:yellow;
}
#title{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background:url("title.png");
background-size:cover;
z-index:20;
-webkit-transition: .5s; /* For Safari 3.1 to 6.0 */
transition: .5s;
}
#name{
position:absolute;
top:200px;
width:100%;
text-align:center;
font-size:80px;
}
#name a{
position:relative;
font-size:20px;
text-align:right;
display:block;
margin: -25px 40px 0 0;
}
.btntitle{
position:relaive;
margin-top:400px;
float:left;
margin-left:30px;
background:orange;
height:40px;
width:260px;
padding-top:10px;
font-size:35px;
color:white;
text-align:center;
cursor:pointer;
}
.btn{
position:relaive;
float:left;
margin-top:30px;
margin-left:37px;
background:orange;
height:40px;
width:105px;
padding-top:10px;
font-size:30px;
color:white;
text-align:center;
cursor:pointer;
}
#aurora{
position:absolute;
top:170px;
background:yellow;
left:170px;
width:20px;
height:20px;
box-shadow:0 0 10px yellow;
transform-origin:50% 50%;
-ms-transform-origin:50% 50%; /* IE 9 */
-webkit-transform-origin:50% 50%; /* Chrome, Safari, Opera */
}
.tail{
position:absolute;
left:175px;
top:175px;
background:yellow;
opacity:.8;
transform-origin:50% 50%;
-ms-transform-origin:50% 50%; /* IE 9 */
-webkit-transform-origin:50% 50%; /* Chrome, Safari, Opera */
box-shadow:0 0 10px yellow;
}
#workspace{
position:relative;
top:0;
height:540px;
width:320px;
background:black;
overflow:hidden;
background-image:url("bg.jpg");
background-size:100% 100%;
background-repeat:no-repeat;
}
#menu{
position:absolute;
top:50%;
left:0;
background:rgba(55,55,55,.5);
margin-top:-110px;
height:200px;
width:320px;
border-top:10px solid yellow;
border-bottom:10px solid yellow;
-webkit-transition: .5s; /* For Safari 3.1 to 6.0 */
transition: .5s;
color:yellow;
overflow:hidden;
text-align:center;
z-index:10;
pointer-events:none;
}
#menu h3{
cursor:pointer;
}
#score{
position:relative;
padding:10px;
font-size:20px;
float:right;
opacity:0;
}
#result{
float:left;
text-align:left;
position:relative;
top:10px;
left:37px;
width: 130px;
height: 100px;
}
#rank{
float:left;
position:relative;
top:10px;
left:25px;
width: 150px;
height: 100px;
}
.numb{
font-size:30px;
}
#tutorial{
position:absolute;
top:20px;
height:50px;
width:320px;
-webkit-transition: .5s; /* For Safari 3.1 to 6.0 */
transition: .5s;
text-align:center;
font-size:20px;
}
.WL{
left:0;
}
.WR{right:0;}
.WR, .WL{
position:absolute;
height:20px;
width:100px;
-webkit-transition:opacity .5s; /* For Safari 3.1 to 6.0 */
transition:opacity .5s;
background-size:contain;
background-image:url("pattern.jpg");
box-shadow:0 1px 10px green;
}
.sides{
position:fixed;
width:50%;
height:100%;
z-index:9;
background-size:contain;
opacity:0;
-webkit-transition:opacity .1s; /* For Safari 3.1 to 6.0 */
transition:opacity .1s;
}
#medal{
padding:15px;
}
#option{
background-image:url('mini/setting.png');
position:absolute;
height:30px;
width:30px;
float:left;
right:0;
bottom:0;
margin:5px;
background-size:contain;
background-repeat:no-repeat;
background-position:center;
font-size:30px;
line-height:33px;
text-align:center;
color:white;
z-index:10;
opacity:.5;
cursor:pointer;
-webkit-transition:right .5s; /* For Safari 3.1 to 6.0 */
transition:right .5s;
}
#option:hover{
opacity:1;
}
#settings{
z-index:13;
position:absolute;
padding:0 20px 0 20px;
height:100%;
width:280px;
bottom:-100%;
background:rgba(55,55,55,.9);
-webkit-transition:bottom .5s; /* For Safari 3.1 to 6.0 */
transition:bottom .5s;
}