@import url('https://fonts.googleapis.com/css2?family=Tourney:wght@400;900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: rgb(83, 162, 204);
  font-family: Tourney, monospace;
  overflow: hidden;
}

#btns-cel{
  background-color: rgb(25, 25, 25);
  display: flex;
  flex-direction: column;
  gap: 45px;
  border-radius: 10px;
  padding: 15px;
  position: absolute;
  right: 0px;
  bottom: 30px;
  opacity: .8;
}

#btns-cel button{
  border-radius: 5%;
  height: 60px;
  width: 60px;
  background-color: aquamarine;
  outline: 5px solid aquamarine;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

#btns-cel button:active{
  background-color: rgb(7, 149, 33);
  outline: 5px solid rgb(7, 149, 33);
}

#btn-jump{
  background-image: url('images/up-arrow.png');
}

#btn-crouch{
  background-image: url('images/down-arrow.png');
}

#btn-play{
  background-image: url('images/play.png');
}

#mensagem, #game-over {
  background-color: rgb(25, 25, 25, .85);
  border-radius: 10px;
  padding: 30px;
  color: white;
  width: 450px;
  height: fit-content;
  position: absolute;
  left: calc(50% - 220px);
  top: 130px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  font-size: 24px;
  text-align: center;
  font-weight: 400;
}

#game-over-img{
  max-width: 130px;
}

#mensagem section, #game-over section{
  display: flex;
  flex-direction: column;
  gap: 15px;
  justify-content: center;
  align-items: center;
}

h1, h3 {
  font-weight: 400;
}

p {
  font-weight: 900;
  font-size: 20px;
}


#pontuacao{
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.336);
  border-radius: 10px;
  font-weight: 600;
  pointer-events: none;
  padding: 30px;
  text-align: center;
  font-size: large;
}

.btn-music{
  background-color: aquamarine;
  outline: 5px solid aquamarine;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
  width: 50px;
  height: 50px;
  background-image: url('images/musical-note.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.btn-music:active{
  background-color: rgb(50, 171, 131);
  outline: 5px solid rgb(50, 171, 131);
}


.button-visited{
  background-color: rgb(10, 139, 231) !important;
  outline: 5px solid rgb(10, 139, 231)!important;
  color: white !important;
  box-shadow: 0px 0px 20px white;
}

#background{
  pointer-events: none;
  position: absolute;
  bottom: 100px;
  width: 100%;
  height: 500px;
  z-index: 0;
  background-image: url('images/background.gif');
  background-repeat: repeat-x;
  background-position: bottom;
}

#background img{
  width: 100%;
  height: 100%;
}


footer {
  background-color: rgb(25, 25, 25);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 150px 0 10px;
  height: 100px;
  position: absolute;
  width: 100%;
  bottom: 0;
}

#info{
  display: flex;
  gap: 20px;
  align-items: center;
}

#info p{
  word-wrap: break-word;
}

#jhonatec {
  width: 80px;
  height: 200px;
  color: white;
  text-align: center;
  margin-left: 40px;
  position: absolute;
  bottom: 130px;
  background-image: url('images/caminhando.gif');
  background-size: cover;
  background-repeat: no-repeat;
}

.nada{
  display: none !important;
}

#jhonatec-finale {
  width: 120px;
  height: 200px;
  color: white;
  text-align: center;
  margin-left: 40px;
  position: absolute;
  bottom: 130px;
  background-image: url('images/finale-cadeira.gif');
  background-size: contain;
  background-repeat: no-repeat;
  animation: finale-walk 5s infinite alternate;
}

#finale-computer {
  width: 100px;
  height: 250px;
  position: absolute;
  bottom: 130px;
  background-image: url('images/finale-computer.gif');
  background-size: cover;
  background-repeat: no-repeat;
  right: -100px;
  animation: finale-computer-walk 5s infinite alternate;
}

.jump {
  animation: toJump .6s ease-in;
}

.crouch {
  height: 90px;
}

.floor-object {
  width: 60px;
  height: 60px;
  position: absolute;
  bottom: 130px;
  right: 0;
}

.float-object {
  width: 130px;
  height: 250px;
  right: 0;
  position: absolute;
  bottom: 130px;
  margin-bottom: 130px;
}

#lint-object {
  width: 350px;
  height: 200px;
  right: 0;
  position: absolute;
  bottom: 130px;
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background-image: url('images/lint.jpeg');
  background-size: contain;
  box-shadow: -3px -2px 5px red;
} 

#lint-object h3 {
  color: white;
  text-shadow: 3px 2px 2px red;
  text-decoration: red underline wavy;
  font-size: xx-large;
}

.lint-final{
  animation: toJump 1s infinite;
}

.mid-float-object {
  width: 60px;
  height: 60px;
  position: absolute;
  right: 0;
  bottom: 130px;
  margin-bottom: 100px;
}

/* Classes personalizadas */
.cama{
  background-image: url('images/cama.png');
}

.storm{
  background-image: url('images/storm.png');
}

.computer{
  background-image: url('images/computer.png');
}

.whatsapp{
  background-image: url('images/whatsapp.png');
}

.instagram{
  background-image: url('images/instagram.png');
}

.tiktok{
  background-image: url('images/tiktok.png');
}

.youtube{
  background-image: url('images/youtube.png');
}

.no-signal{
  background-image: url('images/no-signal.png');
}

.obj{
  background-size: contain;
}

/* Game Over */
#game-over-obj{
  width: 200px;
  height: 200px;
  z-index: -1;
  margin-bottom: -240px;
  background-repeat: round;
  /* background-size: inherit; */
}

.finale-panel{
  animation: finaleColor 3s alternate infinite;
  box-shadow: 5px 5px 50px black;
}

/* ANimations */
@keyframes toJump {
  0% {
    margin-bottom: 0;
  }

  25% {
    margin-bottom: 250px;
  }

  65% {
    margin-bottom: 250px;
  }

}

@keyframes finaleColor {
  0% {
    background-color: rgba(35, 121, 92, 0.794);
  }

  25% {
    background-color: rgb(12, 122, 177, 0.794);
  }

  50% {
    background-color: rgb(184, 23, 205, 0.794);
  }

  100%{
    background-color: rgb(254, 151, 77, 0.794);
  }

}


@keyframes finale-walk{
  0%{
    margin-left: 40px;
  }
  100%{
    margin-left: calc(100% - 350px);
  }
}

@keyframes finale-computer-walk {
  0%{
    right: -100px;
  }
  100%{
    right: 120px;
  }
}

/* MEdia query */
@media only screen and (orientation: landscape) and (max-height: 700px) {
  #mensagem, #game-over{
    top: 20px;
    /* font-size: small; */
    flex-direction: row;
    width: 650px;
    left: calc(50% - 325px);
  }

  #game-over-obj{
    width: 200px;
    height: 170px;
  }

  #game-over-img{
    width: 100px;
  }

  p{
    font-size: small;
  }

  footer{
    height: 70px;
  }

  main, #background{
    bottom: 70px;
  }

  #jhonatec{
    bottom: 110px;
  }

  .floor-object{
    bottom: 110px;
  }

  .float-object{
    bottom: 110px;
  }

  .mid-float-object{
    bottom: 110x;
  }

}