body {
  margin: 0;
  font-family: "zabars", Arial, Helvetica, sans-serif !important;
}

.main-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url(img/desert.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 2700px 1080px;
  width: 100%;
  height: 100vh;
}

.title {
  font-size: 64px;
  letter-spacing: 3px;
  text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}

canvas {
  background-color: transparent;
  display: blocK;
}

.game_container {
  position: relative;
}

.start_screen {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: absolute;
  top: 0;
  z-index: 3;
}

.start_img {
  z-index: 2;
  width: 720px;
  height: 480px;
}

.start_game_btn,
.end_game_btn,
.controls_btn {
  z-index: 2;
  margin-bottom: 20px;
  font-size: 32px;
  border-style: unset;
  padding: 10px;
  transition: 0.2s transform ease-in-out;
  will-change: transform;
  background-color: #e68956;
  font-family: "zabars", Arial, Helvetica, sans-serif !important;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
  outline: 1px solid;
  outline-offset: 0px;
  transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
  letter-spacing: 3px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.end_game_btn{
  position: absolute;
}

.controls_btn {
  display: none;
}

.buttons {
  display: flex;
  position: absolute;
  justify-content: center;
  gap: 20px;
}

.start_game_btn:hover,
.end_game_btn:hover,
.controls_btn:hover {
  cursor: pointer;
  box-shadow: inset 0 0 20px rgba(215, 115, 8, 0.5),
    0 0 20px rgba(255, 255, 255, 0.2);
  outline-color: rgba(255, 255, 255, 0);
  outline-offset: 15px;
}

.controls_container {
  display: flex;
  width: 720px;
  gap: 42px;
  justify-content: center;
}

.throw_container img {
  height: 64px;
  width: 64px;
}

.walk_container,
.jump_container,
.throw_container,
.buy_container,
.mute_audio_container,
.show_audio_container,
.fullscreen_open_container,
.fullscreen_close_container {
  display: flex;
  align-items: center;
  flex-direction: column;
  font-size: 22px;
}

.show_audio_container {
  display: none;
}

.mute_img,
.play_img,
.fullscreen_img,
.fullscreen_close_img {
  cursor: pointer;
}

.fullscreen_close_container {
  display: none;
}

.ingame_container {
  display: flex;
  position: absolute;
  top: 0;
  z-index: 3;
}

.endgame_screen {
  position: absolute;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 6;
  justify-content: center;
  align-items: flex-end;
}

.endgame_screen img {
  width: 100%;
  height: 100%;
}

#winMsg {
  position: absolute;
  display: none;
  align-self: flex-start;
  font-size: 64px;
  margin-top: 15%;
  color: black;
  letter-spacing: 3px;
  text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}

#portrait {
  display: none;
  position: absolute;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: black;
  gap: 35px;
}

.header_portrait img {
  margin-top: 25%;
  width: 40vw;
  height: 20vh;
}

#portrait span {
  color: white;
  font-size: 42px;
  text-align: center;
  margin-left: 25px;
  margin-right: 25px;
}

.ingame_buttons {
  display: none;
  position: absolute;
  bottom: 5px;
  width: 100%;
  height: 44px;
  justify-content: space-between;
}
.left-side {
  display: flex;
  gap: 20px;
  width: 30%;
}

.ingame_buttons button {
  border-style: unset;
  background-color: transparent;
}

.ingame_buttons img {
  height: 43px;
  width: 43px;
}

.controlsModal {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: white;
  z-index: 6;
  display: none;
  justify-content: center;
}

.controlsModal h2 {
  font-size: 64px;
  letter-spacing: 3px;
}

.cross {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 20px;
  right: 40px;
}

footer{
  display: flex;
  position: absolute;
  bottom: 5px;
  align-self: center;
  justify-content: center;
}

footer a{
  text-decoration: none;
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
}

@font-face {
  font-family: "zabars";
  src: url("fonts/zabars.ttf") format("truetype");
}

/* Smartphones */

@media only screen and (max-width: 720px) {
  .start_img {
    width: 100%;
  }

  canvas {
    width: 100%;
  }

  .endgame_screen img {
    width: 100%;
  }
  .title {
    display: none;
  }
  .game_container {
    width: 100%;
  }

  .controls_container {
    display: none;
  }

  footer{
    display: none;
  }
}

@media only screen and (max-height: 480px) {
  .start_img {
    width: 100%;
    height: 100%;
  }

  canvas {
    width: 100%;
    height: 100%;
  }

  .endgame_screen img {
    width: 100%;
    height: 100%;
  }
  .title {
    display: none;
  }
  .game_container {
    width: 100%;
    height: 100%;
  }
  .controls_container {
    display: none;
  }
  .start_screen {
    width: 100%;
    height: 100%;
  }

  footer{
    display: none;
  }

  @media (orientation: landscape) {
    #portrait {
      display: none !important;
    }
    #game_container {
      display: flex !important;
    }
    #mobile_buttons {
      display: flex;
    }
    .controls_btn {
      display: flex;
    }

    footer{
      display: none;
    }
  }

  /* Portrait orientation styles */
  @media (orientation: portrait) {
    #portrait {
      display: flex !important;
    }
    #game_container {
      display: none !important;
    }
    #mobile_buttons {
      display: none;
    }

    footer{
      display: none;
    }
  }
}