* { margin:0; padding:0; border:0; box-sizing:border-box; }
body { background: linear-gradient(#93BEDF, #77F8F1); }

.container { max-width:1200px;display:flex; align-items:center; margin:0 auto; height:100vh;  }
.jogo { position:relative; width:100%; height:550px;  background: url('../../assets/img/predios.png') center bottom 140px, linear-gradient(#77F8F1, #93BEDF); background-repeat: repeat-x; display:block; margin:0 auto; padding:40px;  overflow:hidden; border-radius:16px; }

.sol {  width:auto; margin:0 auto;  animation:sol 1s infinite ease-in-out alternate; z-index:1; display:none; }
.nuvem { position:absolute; top:20px; display:none; }
.esquerda { animation:nuvem-esquerda 60s ease-out infinite; }
.direita { animation:nuvem-direita 85s ease-out infinite; width:250px; }
.obstaculo { width:110px; position:absolute; bottom:0; display:none;  animation:animacao-obstaculo 1.3s infinite linear; }
.personagem { width:100px; bottom:0; position:absolute; left:40px; }
.pulo-personagem { animation:pulo-personagem 650ms ease-out; }

.ultimas-pontuacoes { width:250px; background:#333; color:#FFF; border-radius:10px; position:absolute; display:none; font-family: 'Roboto Slab', serif; font-size:16px; animation:pontuacoes 0.8s ease-out; left:70px; display: none; }
.ultimas-pontuacoes div {display:flex; align-items:center; flex-direction:column; border:1px dashed #ddd; margin:10px; padding:10px; border-radius:15px; }
.ultimas-pontuacoes p{ margin: 0; }

.painel { display:none; flex-direction:column; justify-content:center; align-items:center; margin-top:70px; font-family:'Bungee Spice', cursive; }
.painel .placar h1 { font-size:20px; }
.painel .placar span { font-size:28px; }
.painel .game-over { display:none; }
.painel .game-over h2 { font-size:40px; animation:game-over 0.8s ease-out; position:relative;}
.fim { animation:fim 1.2s ease-in-out forwards; } 

.iniciar { height:550px; display:flex; align-items:center; max-height:100%; }
.iniciar button.start { width:fit-content; padding:5px 20px; text-transform:uppercase; height:40px; border-radius:15px; background:#333; color:#FFF; margin:20px auto; font-size:16px; animation:game-over 1.2s ease-in-out; position:relative; font-family: 'Bungee Spice', cursive; display:block; }
.iniciar button.start:hover { color:#333; background:#FFF; cursor:pointer; }