body{
  margin: 0px;
  padding: 0px;
  background-color: rgb(137, 193, 94);
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.score_section{
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height:9rem;
  width:42rem;
  border:2.5px solid white;
  border-radius: 15px;
  margin: 50px 60px;
  padding: 10px;
  
}
.score_board{
  display:flex;
  flex-direction:row;
  align-items: center;
  
}
.computer_score,.your_score{
  height:130px;
  width:140px;
  background-color: white;
  border-radius: 8px;
  margin-left: 20px;
  margin-right:20px;
  padding:5px;
  text-align: center;
  font-weight: 600;
  font-family: "Roboto";
  font-size:19px;
  letter-spacing: 0.05cm;
  color: rgb(110, 110, 110);
  box-sizing: border-box;
}
.moves_name{
  
  margin-left:10px;
  font-family: "Roboto";
  font-size:40px;
  letter-spacing: 0.1cm;
  font-weight:600;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.move{
  margin:0px
}
.score{
  font-size:60px;
  margin:5px 5px;
  font-weight: bold;
  color: black;
}
.content_section{
  display:flex;
  flex-direction: row;
  
  justify-content: space-between;
  
}
.moves_section{
  display:flex;
  justify-content: center;
  align-items: center;
  height:320px;
  width:350px;
  /*border:1px solid black;*/
  margin-bottom: 10px;
}
.triangle-up{
  height:50px;
  width:150px;
  background-color: transparent;
  border-top: 15px solid #37432e;
  position: absolute;
  z-index: -1;
  transform: translateY(-65px);
}
.triangle-left{
  height:50px;
  width:155px;
  background-color: transparent;
  border-top: 15px solid #404d35;
  position: absolute;
  z-index: -1;
  transform: translateY(25px) translateX(-81px) rotate(60deg);
}
.triangle-right{
  height:50px;
  width:155px;
  background-color: transparent;
  border-top: 15px solid #404d35;
  position: absolute;
  z-index: -1;
  transform: translateY(25px) translateX(81px) rotate(-60deg);
}


.play_move{
  height:120px;
  width: 220px;
  border-radius:90px;
  background-image: radial-gradient(circle 300px, white, rgb(90, 90, 90));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
img{
  height:50px;
  width: 50px;
}
.Rock{
  
  border:13px solid #0074B6;
  transform: translateY(-95px) translateX(10px);
  box-shadow: 0px 0px 7.4px rgba(0, 0, 0, 0.5);

}
.Paper{
  
  border:13px solid #FFA943;
  transform: translateY(80px);
  box-shadow: 0px 0px 7.4px rgba(0,0,0,0.5);

}
.Scissor{
  border:13px solid #BD00FF;
  transform: translateY(-95px) translateX(-10px);
  box-shadow: 0px 0px 7.4px rgba(0,0,0,0.5);
}
.bottom_section{
  display:flex;
  
}
.rules_section{
  height:3rem;
  width:10rem;
  border: 2.5px solid white;
  border-radius: 10px;
  background-color: transparent;
  color: white;
  font-family: "Roboto";
  font-weight: 600;
  font-size: 1.5em;
  letter-spacing: 0.08cm;
  text-align: center;
  cursor: pointer;
  margin-left: 70rem;
  margin-right: 10px;
  
  margin-bottom: 2rem;
}
.next_button{
  height:3rem;
  width:10rem;
  border: 2.5px solid white;
  border-radius: 10px;
  background-color: transparent;
  color: white;
  font-family: "Roboto";
  font-weight: 600;
  font-size: 1.5em;
  letter-spacing: 0.08cm;
  text-align: center;
  cursor: pointer;
  margin-left: 60rem;
  margin-right: 50px;
  margin-bottom: 2rem;
  visibility: hidden;
  position: absolute;

}
.player_choice,.pc_choice{
  display:flex;
  flex-direction: column;
  align-items: center;
  margin:130px;
  margin-top: 40px;
  font-family: "Roboto";
  font-size:18px;
  letter-spacing: 0.05cm;
  font-weight:500;
  color: white;
}


.move-css{
  height:130px;
  width: 130px;
  border-radius:50%;
  background-image: radial-gradient(circle 380px, white, rgb(90, 90, 90));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top:20px;
}
.Rock-css{
  border:1.5rem solid #0074B6;
  box-shadow: 0px 0px 7.4px rgba(0, 0, 0, 0.5);
}
.Paper-css{
  border:1.5rem solid #FFA943;
  box-shadow: 0px 0px 7.4px rgba(0,0,0,0.5);
}
.Scissor-css{
  border:1.5rem solid #BD00FF;
  box-shadow: 0px 0px 7.4px rgba(0,0,0,0.5);
}
.player_result{
  font-family: "Roboto";
  font-size:2.5rem;
  letter-spacing: 0.05cm;
  font-weight:bold;
  color: white;
  margin-bottom: 0px;
}
.opponent{
  font-family: "Roboto";
  font-size:1.5rem;
  letter-spacing: 0.05cm;
  font-weight:700;
  color: white;
  margin-top: 0px;
  margin-bottom: 15px;
}
.tie_css{
  margin-bottom: 15px;
}
.task_button{
  height:50px;
  width:150px;
  background-color: white;
  font-family: "Roboto";
  font-size:16px;
  letter-spacing: 0.05cm;
  font-weight:600;
  color: rgb(114, 112, 112);
  border-radius: 10px;
  border: none;
  cursor: pointer;
}
.result_section{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
}
.transition_css{
  
  z-index: -1;
  width: 130px;
  height: 130px;
  border-radius: 50%; /* Makes the element a circle */
  background-color: #2E9A2563; /* Base color of the circle */
  box-shadow: 
    0 0 0px 42px rgb(28, 152, 28), /* First shadow */
    0 0 0px 70px rgb(45, 167, 51), /* Second shadow */
    0 0 0px 100px rgba(58, 171, 60, 0.315), /* Third shadow */
    0 0 40px 110px rgba(57, 44, 44, 0.131);
  
}

.message_box{
  position: absolute;
  height: 300px;
  width: 270px;
  border-radius: 10px;
  border:5px solid white;
  background-color: rgb(16, 77, 16);
  z-index: -1;
  text-align: center;
  padding: 20px;
  font-size: 15px;
  font-weight: 400px;
  margin-right: 1rem;
}
.message_section{
  transform: translateX(330px) translateY(-320px);
  visibility: hidden;
  
  
}
.message_visible{
  visibility: visible;
}
.close_button{
  
  height: 4rem;
  width: 4rem;
  border-radius: 50%;
  border:5px solid white;
  background-color: red;
  color: white;
  font-size: 2.5em;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 800;
  font-style: normal;
  text-align: center;
  margin-right: 2em;
  cursor: pointer;
  transform: translateX(285px) translateY(-29px)  ;

}
.rules_head{
  color:white;
  font-size: 30px;
  font-family: "Roboto";
  font-weight: 500;
  margin: 10px 10px;
  text-align: center;
}

ul>li {
    position: relative;
    color: white;
    list-style: none;
    font-family: "Roboto";
    text-align: left;
    margin-bottom: 10px;

}
ul>li:before {
    content: '';
    position: absolute;
    left: -40px;
    top: 15px;
    width: 10px;
    height: 10px;
    background-color: yellow; /* Red color for the square bullet */
}  
.top_section_invisible,.middle_section_invisible{
  visibility: hidden;
}
.play_again_button_visibility,.next_visible{
  visibility: visible;
}
.rules_button_change{
  margin-left: 48rem;
}
.hurray_visibility{
  visibility: hidden;
}
.hurray_page{
  display:flex;
  flex-direction: column;
  position: absolute;
  text-align: center;
  z-index: 1;
  align-items: center;
  
}
.hurray_bg{
  height:250px;
  width: 500px;
  transform:translateY(-70px);
}
.trophey{
  height:150px;
  width: 130px;
  transform:translateY(-170px) translateX(0px);
}
.celebration_message{
  transform: translateY(-164px);
  color: white;
  font-family: "Roboto";
}
h1{
  font-size: 50px;
  margin: 5px 2px;
  letter-spacing: 0.25cm;
}
h2{
  font-size: 25px;
}
.reset_score_button{
  transform: translateY(-140px);
}

/*.hurray_bg{
  height:30vh;
  width: 30vw;
  transform:translateY(-170px);
}
.trophey{
  height:20vh;
  width: 11vw;
  transform:translateY(-231px) translateX(140px);
}*/
@media (max-width: 1300px){
  .rules_section{
  margin-left: 61rem;
}
 .next_button{
  height:3rem;
  width:10rem;
  font-size: 1.5em;
  margin-left: 50rem;
  margin-right: 50px;

}
.rules_button_change{
  
  height:3rem;
  width:10rem;
  font-size: 1.5em;
  margin-left: 38rem;
  margin-right: 50px;
}
.score_section{
    width:90%;
    height:30%;
}
.player_choice{
  margin-right:4rem;
  margin-left: 15rem;
}
.pc_choice{
  margin-left: 4rem;
}

.transition_css{
  
  
  
  
  box-shadow: 
    0 0 0px 30px rgb(28, 152, 28), /* First shadow */
    0 0 0px 60px rgb(45, 167, 51), /* Second shadow */
    0 0 0px 90px rgba(58, 171, 60, 0.315), /* Third shadow */
    0 0 40px 100px rgba(57, 44, 44, 0.131);
  
}
.moves_section{
  transform: translateX(38px);
}


}
@media(max-width: 1129px) {
  .rules_section{
    margin-left: 45rem;
  }
  .rules_button_change{
    margin-left: 28rem;
  }
  .next_button{
    margin-left: 40rem;
  }
  .player_result{
    font-size: 2rem;
  }
  .opponent{
    font-size: 1.2rem;
  }
  .moves_section{
    transform: translateX(60px);
  }
  
}
@media(max-width: 989px) {
  .player_choice{
  margin-right:2rem;
  
}
.pc_choice{
  margin-left: 2rem;
}
.transition_css{
  
  
  
  
  box-shadow: 
    0 0 0px 15px rgb(28, 152, 28), /* First shadow */
    0 0 0px 30px rgb(45, 167, 51), /* Second shadow */
    0 0 0px 50px rgba(58, 171, 60, 0.315), /* Third shadow */
    0 0 40px 70px rgba(57, 44, 44, 0.131);
  
}
.moves_section{
  transform: translateX(62px);
}
.hurray_page{
  transform: translateX(62px);
}
.player_result{
    font-size: 1.7rem;
  }
  .opponent{
    font-size: 1rem;
  }
  .play_again_button{
    height:3rem;
    width:9rem;
    font-weight: 800;
    font-size: 1rem;
  }
  .top_section{
    transform: translateX(57px);
  }
  .score_section {
        width: 30rem;
        height: 7rem;
}
.moves_name{
  font-size: 1.5rem;
  letter-spacing: 0cm;
}
.computer_score,.your_score{
  height:6rem;
  width:7rem;
  font-size: 1rem;
  font-weight: 800;
}
.score{
  font-size: 2rem;
}
.rules_section{
  margin-left: 9rem;
}
.rules_button_change{
    margin-left: -10rem;
  }
  .next_button{
    margin-left: 10rem;
  }
}
@media(max-width: 800px){
  .top_section{
    transform: translateX(114px);
  }
  .content_section{
    transform: translateX(80px) ;
  }
  .move-css{
    height: 5rem;
    width: 5rem;
    border-width: 1rem;
    
  }
  .rules_section{
    margin-left: 18rem;
  }
  .rules_button_change{
    margin-left: 6rem;
    margin-right: 0px;
  }
  .next_button{
    margin-left: 18rem;
  }
  .player_choice,.pc_choice{
    font-size: 1rem;
  }
  .hurray_page{
    transform: translateX(142px)translateY(50px);
  }

}
@media(max-width:630px)
{
  .top_section{
    transform: translateX(165px);
  }
  .content_section{
    transform: translateX(120px);
  }
  .rules_section{
    margin-left: 24rem;
  }
  .rules_button_change{
    margin-left: 11rem;
    margin-right: 0px;
  }
  .next_button{
    margin-left: 22rem;
  }
  .hurray_bg{
    height: 12rem;
    width:20rem;
  }
  .trophey{
    height: 7rem;
    width: 7rem;
  }
  .celebration_message {
    transform: translateX(13px) translateY(-158px);
}
.reset_score_button {
    transform: translatex(10px) translateY(-140px);
  }
.hurray_page{
  transform: translateX(180px);
}
}
@media(max-width:400px){
  .top_section{
    transform: translateX(210px);
  }
  .content_section{
    transform: translateX(160px);
  }
  .rules_section{
    margin-left: 28rem;
  }
  .rules_button_change{
    margin-left: 16rem;
    margin-right: 0px;
  }
  .next_button{
    margin-left: 27rem;
  }
  .hurray_page{
    transform: translateX(215px);
  }

}