*{
   margin: 0;
  padding: 0;
}

body{
  background-color: #2A214A;
}
a{
  text-decoration: none;
}
/*-----------------index page-------------------------*/

#home{
  height: 100vh;
}
#home img{
position: absolute;
width: 50%;
height: 90%;
left: 339px;
top: 37px;
}
#home h1{
  font-size: 5rem;
  position: absolute;
  left: 490px;
top:14rem;
color: bisque;
text-align: center;
}
.begin{
  position: absolute;
  left: 33rem;
top:28rem;
}
.btn{
  padding: 20px;
  margin: 10px;
  border-radius: 10px;
  border-style: solid;
border-color:white;
  background-color: transparent;
}
.btn a{
  font-size: 2rem;
  color:chocolate;
}
.btn:hover {
  background-color: bisque;
}
#sence1{
  height: 100vh;
  display: grid;
  grid-template-columns: 20% 60% 20%;
}
/*-------------the dialogue -----------------------------*/
#detective{
  display: flex;
}
#talk{
display: flex;
width: 50%;
height: 70%;
background-color: wheat;
border-radius: 10px;
margin: auto;
}
.dialoguep{
  text-align: center;
  font-size: 1.5rem;
  padding-top: 1rem;
  font-weight: 800;
}
.dialogued{
  text-align: center;
  font-size: 1.5rem;
  padding: 4rem;
  font-weight: 800;
}
#policeman{
  display: flex;
}
#policeman img{
  width: 100%;
  height: 100vh;
 
}
/*-------------the instraction -----------------------------*/

#howtoplay{
  width: 50%;
  height: 50%;
  background-color: bisque;
  margin: auto;
}
#howtoplay ul{
  padding: 5px;
  margin: 4rem;
  font-size: 3rem;
  color: chocolate;
}

/*---------------style for the header in the stage---------------------------*/
#containerHeader{
  display: grid;
  grid-template-columns:20% 60% 20%;
}
.nameOfGame{
  top:10px;
  background: #FEE0B3;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 64px;
}
.nameOfGame h1{
 font-size: 5rem;
 margin-top: 1rem;
  text-align: center;
  color: saddlebrown;
  background-color: transparent;
}
.rose img{
  width: 60%;
  padding-left: 50px;
  
}
/*-------------the style of the game -----------------------------*/
#main{
  display: grid;
  grid-template-columns: 20% 60% 20%;
}
.info{
  width: 55%;
height: 600px;
background: #FEE0B3;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 31px;
margin: 10px;
padding: 10px;
}
.back{
position: absolute;
width: 1024px;
height: 518px;
left: 208px;
top: 253px;
}
/*-------------the hideen object -----------------------------*/

#brokenWall{
position: absolute;
width: 77px;
height: 61px;
left: 993px;
top: 346px;}

#butterfly{
position: absolute;
width: 36px;
height: 28px;
left: 472px;
top: 476px;
}
#locker{
position: absolute;
width: 40px;
height: 61px;
left: 784px;
top: 425px;
}
#wing{
position: absolute;
width: 44px;
height: 30px;
left: 830px;
top: 365px;
mix-blend-mode: soft-light;
}
#envelope{
position: absolute;
width: 63px;
height: 37px;
left: 546px;
top: 455px;
}
#needle{
position: absolute;
width: 24px;
height: 40px;
left: 578.94px;
top: 522px;
transform: rotate(33.26deg);
}
#danger{
position: absolute;
width: 77px;
height: 51px;
left: 577px;
top: 257px;
mix-blend-mode: luminosity;
}
#spider{
position: absolute;
width: 26px;
height: 23px;
left: 715px;
top: 515px;
}
#mouse{
position: absolute;
width: 57px;
height: 29px;
left: 408px;
top: 712px;
}
#shoes{
position: absolute;
width: 41px;
height: 40px;
left: 579px;
top: 650px;
}
#newspaper{
position: absolute;
width: 26px;
height: 16.55px;
left: 1144px;
top: 683px;
}
#knife{
position: absolute;
width: 39px;
height: 39px;
left: 1198px;
top: 732px;
}
#cat{
position: absolute;
width: 37px;
height: 39px;
left: 664px;
top: 575px;
}
#bat{
position: absolute;
width: 35px;
height: 27px;
left: 682px;
top: 397px;
mix-blend-mode: multiply;
}
#wolf{
position: absolute;
width: 37px;
height: 38px;
left: 868px;
top: 588px;
}
#blood{
position: absolute;
width: 81px;
height: 75px;
left: 806px;
top: 680px;
mix-blend-mode: multiply;
}
#skeleton{
position: absolute;
width: 21px;
height: 28px;
left: 1055px;
top: 632px;
mix-blend-mode: hard-light;
}
#scorpion{
position: absolute;
width: 38px;
height: 38px;
left: 970px;
top: 684px;
}
#ring{
position: absolute;
width: 24px;
height: 27px;
left: 858px;
top: 648px;
}
#pen{
position: absolute;
width: 94px;
height: 37px;
left: 777px;
top: 564px;
}
#ear{
position: absolute;
width: 26px;
height: 38px;
left: 644px;
top: 274px;
}
#magnifier{
position: absolute;
width: 54px;
height: 23px;
left: 702px;
top: 357px;
}
#elephant{
position: absolute;
width: 56px;
height: 47px;
left: 541px;
top: 296px;
}
#triangle{
position: absolute;
width: 37px;
height: 90px;
left: 513px;
top: 471px;
}
#matchligh{
position: absolute;
width: 35px;
height: 30px;
left: 365px;
top: 661px;
}
#redlipstick{
position: absolute;
width: 31px;
height: 31px;
left: 540px;
top: 480px;
}
#ticket{
position: absolute;
width: 31px;
height: 25px;
left: 562px;
top: 725px;
}
/*-------------the time and score -----------------------------*/

#timerText{
font-size: 2rem;
margin-top: 10rem;
text-align: center;
color: saddlebrown;
background-color: transparent;
}

.score{
font-size: 2rem;
margin-top: 4rem;
text-align: center;
color: saddlebrown;
background-color: transparent;
}
/*-------------the items name style -----------------------------*/

.nameOfIteam{
width: 55%;
height: 600px;
background: #FEE0B3;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 31px;
position: relative;
margin-left: 100px;
padding: 10px;
}
#items{
font-size: 1rem;
margin-top: 13rem;
text-align: center;
color: saddlebrown;
background-color: transparent;
}
/*-------------the option of try again style -----------------------------*/
#relod{
position: absolute;
width: 25%;
height: 25%;
background-color: wheat;
top: 20rem;
left: 30rem;
}
/*-------------the win style -----------------------------*/

.win{
position: absolute;
width: 25%;
height: 25%;
background-color: wheat;
top: 20rem;
left: 30rem;
font-size: 2rem;
color: chocolate;
padding: auto;
}