body { margin: 0; padding: 0; overflow: hidden; background: #202028; font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 40px; color: #fff; } #language-selector { position: absolute; right: 10px; top: 10px; font-size: 14px; font-weight: 300; z-index: 1; } .lang { display: inline; margin-left: 10px; border-radius: 2px; padding: 4px 8px; cursor: pointer; } .lang.active { background-color: #3877FF; } #game-title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -25%) translateY(-200px); opacity: 1; transition: opacity .5s; } #game-play, #game-reset { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 75px; font-size: 30px; box-shadow: none; color: #ffff !important; background: #3877FF !important; border: 0 !important; border-radius: 0 !important; transition: box-shadow .2s, opacity .5s; cursor: pointer; opacity: 1; } #game-reset { display: none; background-color: #FF0D72 !important; transform: translate(-50%, -50%) translateY(85px); opacity: 0; } #game-play:hover, #game-play:active, #game-play:focus { outline: none !important; box-shadow: 3px 4px 0 3px rgba(0, 0, 0, 0.2) !important; } #background { width: 100%; height: 100%; position: absolute; left: 0; top: 0; filter: none; } #background.blurred { filter: url(#f1); } #tetris { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border: solid .2em #fff; } #score, #controls { position: absolute; font-weight: 900; top: 50%; right: 75%; transform: translate(-50%, -50%); } #score:before { content: attr(data-prefix); } #controls { left: 75%; right: 0; font-size: 20px; font-weight: 300; transform: translate(0, -50%); }