* {
  padding: 0px;
  margin: 0px;
  font-family: "Baloo 2", cursive;
}

/* St of Backgournd ---------------- */

body {
  height: 100vh;
  width: 100vw;
  overflow-y: hidden;
  overflow-x: hidden;
  background-image: linear-gradient(to right, #ffc3a0 0%, #ffafbd 100%);
  background-size: cover;
}

#background_elipse {
  position: absolute;
  border: 4vh solid #ff3636;
  left: -1vw;
  right: -1vw;
  border-radius: 50%;
  top: -5vh;
  bottom: -25vh;
  background-color: white;
}

/* ---------------------end of Backgournd */

/* St of login section ------------------- */
.Login_Section {
  display: none;
}

.Login_Section_Out {
  animation: Login_Section_Out 0.5s ease-out forwards;
}

.intro_right_hand {
  position: absolute;
  height: 27vh;
  top: 32vh;
  right: 35vw;
  animation: intro_righ_hand_move 1s cubic-bezier(0.6, -0.28, 0.74, 0.05) 0.5s 1
    forwards;
}

.intro_left_hand {
  position: absolute;
  height: 27vh;
  top: 11vh;
  left: 31vw;
  transform: scaleX(-1);
  animation: intro_left_hand_move 1s cubic-bezier(0.6, -0.28, 0.74, 0.05) 0.5s 1
    forwards;
}

.intro_vs {
  position: absolute;
  height: 41vh;
  top: 12vh;
  left: 38.5vw;
}

.intro_vs_appear {
  /* Animation*/
  animation: intro_vs_appear 1s cubic-bezier(0.6, -0.28, 0.74, 0.05) 0.5s 1
    forwards;
}

.intro_vs_rotate {
  /* Animation*/
  animation: intro_vs_rotate 1s linear infinite;
}

.input_name {
  position: absolute;
  height: 7vh;
  width: 25vw;
  top: 66vh;
  left: 37.5vw;
  border: solid 0.6vh;
  border-color: #ff3636;
  border-radius: 5vh;
  font-size: 3vh;
  font-weight: bold;
  text-align: center;
}

.input_name:focus {
  outline: none;
}

.error_msg {
  display: none;
  position: absolute;
  height: 7vh;
  width: 25vw;
  top: 62vh;
  left: 37.5vw;
  font-size: 2.5vh;
  font-weight: bold;
  text-align: center;
  color: #ff3636;
}

.login_btn {
  position: absolute;
  height: 10vh;
  width: 18vw;
  top: 80vh;
  left: 41.5vw;
  border: none;
  border-radius: 5vh;
  font-size: 4vh;
  font-weight: bold;
  text-align: center;
  background-color: #ff3636;
  color: white;
  transition: 0.2s;
}

.login_btn:hover {
  transform: scale(1.1, 1.1);
}

.login_btn:active {
  transform: scale(1, 1);
}

@keyframes Login_Section_Out {
  100% {
    transform: translate(0%, -6vw);
    opacity: 0%;
  }
}
@keyframes intro_righ_hand_move {
  0% {
    transform: translate(30vw, 0vh);
    opacity: 0%;
  }
  50% {
    opacity: 100%;
  }
}

@keyframes intro_left_hand_move {
  0% {
    transform: translate(-20vw, 0vh) scaleX(-1);
    opacity: 0%;
  }
  50% {
    opacity: 100%;
  }
}

@keyframes intro_vs_appear {
  0% {
    opacity: 0%;
    transform: scale(0, 0);
  }
  100% {
    opacity: 100%;
  }
}

@keyframes intro_vs_rotate {
  33% {
    transform: rotate(-0.01turn);
  }
  66% {
    transform: rotate(0.01turn);
  }
}

/* -------------------------------End of login section*/

/* St of select round section ------------------- */
.Select_Round_Section {
  display: none;
  animation: Select_Round_Section_in 1s forwards;
}

.Select_Round_Section_out {
  animation: Select_Round_Section_out 1s forwards;
}

.right_hand {
  position: absolute;
  height: 27vh;
  top: 32vh;
  right: 9vw;
  animation: right_hand_up_down 1s infinite linear;
}

.right_hand_roll {
  animation: right_hand_roll 1s cubic-bezier(0.6, -0.28, 0.74, 0.05) 3;
}

.left_hand {
  position: absolute;
  height: 27vh;
  top: 32vh;
  left: 9vw;
  transform: scaleX(-1);
  animation: left_hand_up_down 1s infinite linear 0.5s;
}

.left_hand_roll {
  animation: left_hand_roll 1s cubic-bezier(0.6, -0.28, 0.74, 0.05) 3;
}

.vs_area {
  display: flex;
  justify-content: center;
  width: 100%;
}
.vs {
  position: absolute;
  height: 24vh;
  top: 32vh;
  animation: intro_vs_rotate 1s linear infinite; /* Animation*/
}

.banner {
  display: block;
}

.banner_round_announce_move {
  animation: 0.5s banner_round_announce_move 2;
}

.banner_img_flex {
  position: relative;
  top: 0vh;
  width: 100%;
  display: flex;
  justify-content: center;
}

.banner_img {
  height: 28vh;
}

.banner_text {
  position: absolute;
  top: 5vh;
  left: 0vw;
  color: white;
  font-size: 5vh;
  font-weight: bold;
  width: 100%;
  text-align: center;
}

.player_name_p {
  position: absolute;
  top: 56.5vh;
  left: 13.3vw;
  color: #ff3636;
  font-size: 5vh;
  font-weight: bold;
  text-align: center;
  width: 15vw;
  height: 7vh;
  overflow: hidden;
}
.player_score_p {
  position: absolute;
  top: 63.5vh;
  left: 17.3vw;
  color: black;
  font-size: 4vh;
  font-weight: bold;
}

.Computer_name_p {
  position: absolute;
  top: 56.5vh;
  right: 15vw;
  color: #ff3636;
  font-size: 5vh;
  font-weight: bold;
  text-align: center;
}

.Computer_score_p {
  position: absolute;
  top: 63.5vh;
  right: 17vw;
  color: black;
  font-size: 4vh;
  font-weight: bold;
}

.Choose_Box {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
  position: absolute;
  height: 23vh;
  width: 45vw;
  bottom: 0vh;
  right: 26.5vw;
  border: solid 1vh #ff3636;
  border-radius: 16vh;
}

.Choose_Box_down {
  animation: 0.5s Choose_Box_down forwards;
}

.Choose_Box_up {
  animation: 0.5s Choose_Box_up forwards;
}

.Choose_text {
  color: #ff3636;
  font-weight: bold;
  font-size: 4vh;
}

.hands {
  display: flex;
  justify-content: space-between;
  width: 80%;
}

.rock_pick,
.paper_pick,
.scissors_pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: bold;
  font-size: 3vh;
  transition: 0.05s;
}
.rock_img,
.paper_img,
.scissors_img {
  height: 10vh;
  /* width:10vw; */
  transform: scaleX(-1);
}

.rock_pick:hover,
.paper_pick:hover,
.scissors_pick:hover {
  transform: scale(1.15, 1.15);
}

.rock_pick:active,
.paper_pick:active,
.scissors_pick:active {
  transform: scale(1, 1) rotate(-10deg);
}

.win_point {
  display: none;
  position: absolute;
  left: 19vw;
  top: 16vh;
  font-size: 12vh;
  font-weight: 900;
  color: rgb(59, 236, 59);
  animation: point_move 2s forwards;
  z-index: 700;
}

.lose_point {
  display: none;
  position: absolute;
  right: 19vw;
  top: 16vh;
  font-size: 12vh;
  font-weight: 900;
  color: #ff3636;
  animation: point_move 2s forwards;
  z-index: 700;
}

.draw_point {
  display: none;
  position: absolute;
  top: 25vh;
  width: 100%;
  text-align: center;
  font-size: 8vh;
  font-weight: 900;
  color: #ff3636;
  animation: point_move 2s forwards;
  z-index: 700;
}

@keyframes Select_Round_Section_in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes Select_Round_Section_out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes right_hand_up_down {
  33% {
    transform: translate(0vw, -1vh);
  }
  66% {
    transform: translate(0vw, 1vh);
  }
}

@keyframes left_hand_up_down {
  33% {
    transform: translate(0vw, -1vh) scaleX(-1);
  }
  66% {
    transform: translate(0vw, 1vh) scaleX(-1);
  }
}

@keyframes point_move {
  0% {
    opacity: 100%;
  }
  100% {
    transform: translate(0, -50%);
    opacity: 0%;
  }
}

@keyframes Choose_Box_down {
  0% {
    transform: translate(0vh, 0vh);
  }
  100% {
    transform: translate(0vh, 18vh);
  }
}

@keyframes Choose_Box_up {
  0% {
    transform: translate(0vh, 18vh);
  }
  100% {
    transform: translate(0vh, 0vh);
  }
}

@keyframes banner_round_announce_move {
  50% {
    transform: scale(1.2, 1.2);
  }
}

@keyframes right_hand_roll {
  50% {
    transform: rotate(45deg) translate(0vw, -10vh);
  }
}

@keyframes left_hand_roll {
  0% {
    transform: scaleX(-1);
  }
  50% {
    transform: rotate(-45deg) translate(0vw, -10vh) scaleX(-1);
  }
  100% {
    transform: scaleX(-1);
  }
}
/* -------------------------------end of select round section*/

/* St of Final-Result-Section ------------------------------------ */

.Final_Result_Section {
  display: none;
  animation: Final_Result_Section_in 1s forwards;
}

.Final_Result_Section_out {
  animation: Final_Result_Section_out 1s forwards;
}

.result_img_div {
  display: flex;
  position: absolute;
  width: 100%;
  justify-content: center;
  top: 16vh;
}

.result_img {
  height: 41vh;
  animation: result_img_rotate 1s linear infinite;
}

.result_txt {
  position: absolute;
  color: #ffb332;
  font-weight: bold;
  top: 55vh;
  font-size: 16vh;
  width: 100%;
  text-align: center;
}

.play_again_btn {
  position: absolute;
  height: 10vh;
  width: 18vw;
  top: 80vh;
  left: 41.5vw;
  border: none;
  border-radius: 5vh;
  font-size: 3.8vh;
  font-weight: bold;
  text-align: center;
  background-color: #ff3636;
  color: white;
  transition: 0.2s;
}

.play_again_btn:hover {
  transform: scale(1.1, 1.1);
}

.play_again_btn:active {
  transform: scale(1, 1);
}

@keyframes Final_Result_Section_in {
  0% {
    opacity: 0;
    transform: scale(0.5, 0.5) translate(0vh, 30vh);
  }
  100% {
    opacity: 1;
  }
}

@keyframes Final_Result_Section_out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes result_img_rotate {
  33% {
    transform: rotate(-0.005turn);
  }
  66% {
    transform: rotate(0.005turn);
  }
}

/* -------------------------------end of Final-Result-Section*/

/* St of Media query Iphone x--------------------------------------- */
@media (max-width: 700px) {
  #background_elipse {
    border: 2vh solid #ff3636;
  }

  .intro_right_hand {
    right: 9vw;
    height: 13vh;
  }

  .intro_left_hand {
    top: 22vh;
    left: 14vw;
    height: 13vh;
  }

  .intro_vs {
    top: 21vh;
    left: 33vw;
    height: 23vh;
  }

  .input_name {
    width: 76vw;
    left: 11.5vw;
  }

  .error_msg {
    width: 63vw;
    left: 19.5vw;
  }

  .login_btn {
    width: 55vw;
    left: 23.5vw;
  }

  .banner_img {
    height: 21vh;
  }

  .banner_text {
    top: 4vh;
    font-size: 4vh;
  }

  .left_hand {
    height: 18vh;
    top: 21vh;
    left: 9vw;
    z-index: 500;
  }

  .vs {
    height: 17vh;
    top: 29vh;
    z-index: 600;
  }

  .right_hand {
    height: 18vh;
    top: 40vh;
    right: 9vw;
  }

  .player_name_p {
    font-size: 4vh;
    width: 40vw;
    left: 2vw;
    top: 60vh;
  }

  .Computer_name_p {
    font-size: 4vh;
    width: 40vw;
    right: 4vw;
    top: 60vh;
  }

  .player_score_p {
    top: 64.5vh;
    left: 10.5vw;
    font-size: 3.5vh;
  }

  .Computer_score_p {
    top: 64.5vh;
    right: 10vw;
    font-size: 3.5vh;
  }

  .hands {
    width: 90%;
  }

  .rock_img,
  .paper_img,
  .scissors_img {
    height: 7vh;
  }

  .Choose_Box {
    position: absolute;
    right: 2vw;
    height: 20vh;
    width: 90vw;
    border-radius: 10vh;
    background-color: white;
    z-index: 500;
    bottom: 0vh;
  }

  .result_txt {
    top: 60vh;
    font-size: 10vh;
  }

  .play_again_btn {
    width: 60vw;
    left: 22vw;
  }

  @keyframes Choose_Box_down {
    0% {
      transform: translate(0vh, 0vh);
    }
    100% {
      transform: translate(0vh, 2vh);
      opacity: 0;
    }
  }

  @keyframes Choose_Box_up {
    0% {
      opacity: 0;
      transform: translate(0vh, 2vh);
    }
    100% {
      transform: translate(0vh, 0vh);
    }
  }
}

/* -------------------------------------------------- End of Media query Iphone x */

/* St of Media query Ipad--------------------------------------- */
@media (min-width: 700px) and (max-width: 1148px) {
  #background_elipse {
    border: 2vh solid #ff3636;
  }

  .intro_right_hand {
    right: 19vw;
    height: 18vh;
  }

  .intro_left_hand {
    top: 22vh;
    left: 19vw;
    height: 18vh;
  }

  .intro_vs {
    top: 21vh;
    left: 38vw;
    height: 23vh;
  }

  .input_name {
    width: 59vw;
    left: 20.5vw;
  }

  .error_msg {
    width: 63vw;
    left: 19.5vw;
  }

  .login_btn {
    width: 44vw;
    left: 28.5vw;
  }

  .banner_img {
    height: 21vh;
  }

  .banner_text {
    top: 4vh;
    font-size: 4vh;
  }

  .left_hand {
    height: 21vh;
    top: 28vh;
    left: 6vw;
    z-index: 500;
  }

  .vs {
    height: 17vh;
    top: 29vh;
    z-index: 600;
  }

  .right_hand {
    height: 21vh;
    top: 28vh;
    right: 6vw;
  }

  .player_name_p {
    font-size: 4vh;
    width: 40vw;
    left: 2vw;
    top: 60vh;
  }

  .Computer_name_p {
    font-size: 4vh;
    width: 40vw;
    right: 4vw;
    top: 60vh;
  }

  .player_score_p {
    top: 64.5vh;
    left: 16.5vw;
    font-size: 3.5vh;
  }

  .Computer_score_p {
    top: 64.5vh;
    right: 18vw;
    font-size: 3.5vh;
  }

  .hands {
    width: 90%;
  }

  .rock_img,
  .paper_img,
  .scissors_img {
    height: 7vh;
  }

  .Choose_Box {
    position: absolute;
    right: 12vw;
    height: 20vh;
    width: 73vw;
    border-radius: 10vh;
    background-color: white;
    z-index: 500;
    bottom: 0vh;
  }

  .result_txt {
    top: 60vh;
    font-size: 10vh;
  }

  .play_again_btn {
    width: 60vw;
    left: 22vw;
  }

  @keyframes Choose_Box_down {
    0% {
      transform: translate(0vh, 0vh);
    }
    100% {
      transform: translate(0vh, 2vh);
      opacity: 0;
    }
  }

  @keyframes Choose_Box_up {
    0% {
      opacity: 0;
      transform: translate(0vh, 2vh);
    }
    100% {
      transform: translate(0vh, 0vh);
    }
  }
}

/* -------------------------------------------------- End of Media query Ipad */