html,body{ height:100%; } body{ background: #3f3f3f; margin:0; padding:0; position: relative; font-family: 'American Typewriter','Marker Felt'; } #tetris{ left:50%; top:50%; position: absolute; background: #555; } #scene{ height:100%; position: absolute; background: #2f2f2f; left:120px; } #leftSide { height:100%; position: absolute; top:0px; left:0px; width:120px; text-align: center; } #leftInfo{ height:100%; width:120px; margin:0 auto; } #hold{ position:relative; width:80px; height:360px; background: #2f2f2f; margin:10px auto; } #gameOver{ height:100%; position: absolute; right:120px; background:rgba(0,0,0,.75); z-index:999; color:#ffe100; text-align: center; display: none; } #gameOver h1{ margin-top:50%; } #gameOver a,#gameOver a:visited{ color:#66bc29; text-decoration: none; } #gameOver h3{ color:orange; } #side{ height:100%; position: absolute; top:0; right:0; text-align: center; } #info{ width:120px; margin:0 auto; } #preview{ width:80px; height:360px; top:0px; background: #2f2f2f; margin:10px auto; } #levelInfo{ color:#fff; font-size:18px; margin:10px 0; } #level{ color:orange; font-size:32px; } #scoreInfo{ color:#fff; font-size: 18px; margin-top:0; } #score{ color:orange; font-family: 'Chalkboard SE'; }#linesInfo{ color:#fff; font-size: 18px; margin-top:0; } #lines{ color:orange; font-family: 'Chalkboard SE'; } #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; }