/* Reset padrão */
* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    box-sizing: border-box;
    font: inherit;
  }
  
  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }

  div.container {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  body{
    background-color: lightblue;
  }
  
  div.box {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
  }

  div.background{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../images/bg2.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }


  div.box img{
    position: absolute;
    width: 7vw; 
    margin-left: 3vw;
    } #flapBird {
      transition: left 0.02s linear; /* deixa o movimento suave */
      position: absolute;
      bottom: 0; /* ponto de referência para o translateY */
      left: 30px;
      animation: baterAsAsas 1s infinite;
}

@keyframes baterAsAsas {
  0%, 100% {
    content: url('../images/bird1.png'); /* Imagem com asas abaixadas */
  }
  25% {
    content: url('../images/bird2.png'); /* Imagem com asas levantadas */
  }
  50% {
    content: url('../images/bird3.png'); /* Imagem com asas levantadas */
  }
  75% {
    content: url('../images/bird4.png'); /* Imagem com asas levantadas */
  }
}

#flapBird,
#background1,
#background2,
#obstacle-top,
#obstacle-bottom {
  will-change: transform;
  transform: translateZ(0);
}

  div.obstacle-top {
    top: 0;
    transform: rotate(180deg);
  }

  div.obstacle-bottom {
    bottom: 0;
  } 
  
  div.obstacle-bottom, div.obstacle-top{
    position: absolute;
    transition: left 0.02s linear; /* deixa o movimento suave */
    background-image: url(../images/pipe.png);
    filter: hue-rotate(150deg) contrast(1.3) saturate(2);
    background-repeat: no-repeat;
    background-size: cover;
    height: 35vh;
    width: 16vw;
  }

  div.score{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: aliceblue;
    font-size: 2.2rem;
    font-weight: 600;
    z-index: 1;
    margin-bottom: 90vh;
    width:90vw;
    height: 7vw;
  }  

  #scoreNumber{
    text-shadow: black 2px 2px;
  }
  #highScore {
    text-shadow: black 2px 2px;
  }
  

  #restartButton{
    display: none;
  }

  div.button-box{
    position: absolute;
    display: flex;
    justify-content: center;
    width: auto;
  }

  .button-88 {
    display: flex;
    align-items: center;
    font-family: inherit;
    font-weight: 500;
    font-size: 3rem;
    padding: 0.7em 1.4em 0.7em 1.1em;
    color: white;
    background: #ad5389;
    background: linear-gradient(0deg, rgb(20, 22, 167) 0%, rgb(102, 201, 247) 100%);
    border: none;
    box-shadow: 0 0.7em 1.5em -0.5em #00c3ff98;
    letter-spacing: 0.05em;
    border-radius: 20em;
    z-index: 1;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
  }
  
  .button-88:hover {
    box-shadow: 0 0.5em 1.5em -0.5em #002fff98;
  }
  
  .button-88:active {
    box-shadow: 0 0.3em 1em -0.5em #0044ff98;
  }

  @media (min-width: 768px) {
    div.obstacle-top {
      height: 25vh;
      width: 8vw;
    } div.obstacle-bottom {
      height: 25vh;
      width: 8vw;
    }

  }