%PDF- %PDF-
| Direktori : /home/infra/jogos/tetris/css/ |
| Current File : //home/infra/jogos/tetris/css/styles.css |
html,body{
height:100%;
}
@import url('https://fonts.googleapis.com/css?family=Permanent+Marker');
body{
/* background: #3f3f3f; */
margin:0;
padding:0;
position: relative;
font-family: 'Permanent Marker', cursive;
background-image: url('../bg.jpg');
background-size: cover;
background-position: center center;
}
#tetris{
left:50%;
top:50%;
position: absolute;
border: 3px solid #fff;
box-shadow: 0px 0px 27px rgba(0,0,0,0.2);
}
#scene{
height:100%;
position: absolute;
/* background: #2f2f2f; */
}
#gameOver{
height:100%;
position: absolute;
background: rgba(65,213,255,0.85);
font-family: 'Permanent Marker', cursive;
text-transform: uppercase;
z-index:999;
color:#ffe100;
text-align: center;
display: none;
}
#gameOver h1{
margin-top:50%;
color:#fff;
}
#gameOver a,#gameOver a:visited{
color:#fff;
text-decoration: none;
}
#gameOver h3{
color:#fff;
}
#side{
height:100%;
position: absolute;
background: rgba(255,255,255,1);
top:0;
right:0;
text-align: center;
font-family: 'Permanent Marker', cursive;
}
#info{
width:120px;
margin:0 auto;
}
#preview{
width:80px;
height:80px;
background: #fff;
margin:10px auto;
}
#levelInfo{
color:green;
font-size:18px;
margin:10px 0;
}
#level{
color:orange;
font-size:32px;
}
#scoreInfo{
color:green;
font-size: 18px;
margin-top:0;
}
#score{
color:orange;
font-family: 'Permanent Marker', cursive;
}
#rewardInfo{
color:yellow;
font-weight: bold;
height:20px;
}
.invisible{
visibility: hidden;
}
.animated {
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeOutUp {
0% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
@keyframes fadeOutUp {
0% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
-ms-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}