.home{
display: flex;
align-items: center;
flex-direction: column;
margin-top: 200px;
}

.home h1{
font-family: "Rubik Spray Paint", system-ui;
  font-weight: 90;
  font-style: normal;
  
color: rgb(9, 8, 8);
font-size: 90px;
opacity: 80%;
margin-top: 10px;
text-shadow: 5px 5px 5px black;
}



.home img {

height: 80px;


}


.home p{

font-size: 24px;
  font-family: "Lobster Two", cursive;
  font-weight: 400;
  font-style: normal;
font-weight: lighter;
color: orange;
text-shadow: 5px 5px 5px black;

}


.home button:hover{
background: none;
border: none;
font-size: 30px;
font-weight: 200;
font-family: "Rubik Spray Paint", system-ui;
color: orange;
}

.home button{
background: none;
border: none;
font-size: 30px;
color: orange;
opacity: 80%;
text-shadow: 5px 5px 5px black;
}

#continueGame{
   display: none;
    color: orange;
    font-size: 30px;
    opacity: 80%;
    text-shadow: 5px 5px 5px black;
}



.homePage {
   
background-repeat: no-repeat;
background-size: cover;
 background-position: center;

    min-height: 80vh;

background-image: url(lost\ on\ island.gif);

}


.color1:hover {

cursor: pointer;
color: rgb(212, 163, 17);
text-shadow: 5px 5px 7px black;
 opacity: 0.5;
 transform: scale(1.05);

    transition: 0.3s;
}
.color1{


     color: orange;
}

.color2:hover{
cursor: pointer;
color: rgb(212, 163, 17);
text-shadow: 5px 5px 7px black;
 opacity: 0.5;
 transform: scale(1.05);

    transition: 0.3s;
}

.color2{


     color: orange;
}


.color3:hover{
cursor: pointer;
color: rgb(212, 163, 17);
text-shadow: 5px 5px 7px black;
 opacity: 0.5;
 transform: scale(1.05);

    transition: 0.3s;
}

.color3{


  color: orange;



}



.game-container video {
display: flex;
justify-content: center;

background-repeat: no-repeat;
background-size: cover;
 background-position: center;

height: 813px;
width: auto;
margin: 0;

}

.game-container {

    position: relative;
}


.gameintrobody {
display: flex;
justify-content: center;

background-repeat: no-repeat;
background-size: cover;
 background-position: center;

margin: 0%;

}


 input {

position: absolute;
text-align: center;
 top: 350px;
left: 500px; 
  
background: none;
border: none;
font-size: 40px;
font-weight: bolder;
display: none;
}

.choices {

display: flex;
gap: 20px;

position: absolute;
text-align: center;
 top: 500px;
left: 500px; 
  
background: none;
border: none;
font-size: 40px;
font-weight: bolder;

}

.choices button:hover {
height: 50px;

border-radius: 20px;
box-shadow: 3px 2px 5px rgb(11, 5, 5);
border: none;
font-weight: 600;
background-color: rgb(250, 217, 30);
transform: scale(1.05);

    transition: 0.3s;
}

.choices button {

    height: 50px;
background-color: blanchedalmond ;
border-radius: 20px;
box-shadow: 3px 2px 5px rgb(11, 5, 5);
border: none;
font-weight: 200;
 opacity: 69%;
display:none ;

}

.choices a {
text-decoration: none;

}



.Greetings h1 {

font-weight: lighter;
text-shadow: 5px 5px 5px black;

}




.Greetings  {




position: absolute;

 top: 25px;
left: 1037px; 
  
background: none;
border: none;
font-size: 15px;


color:white;
font-family: sans-serif;
}



#RevealN{

    display: none;
position: absolute;

    top: 370px;

    left: 50%;

    transform: translateX(-50%);

    color: rgb(248, 243, 243);

    font-size: 40px;
 font-family: "Dancing Script", cursive;

}

#bestTime:hover {

color: gold;

}


#bestTime {


color: aquamarine;
text-shadow: 5px 5px 5px black;

}

.choices2 {


display: flex;
gap: 40px;

position: absolute;
text-align: center;
 top: 500px;
left: 620px; 
  
background: none;
border: none;
font-size: 40px;
font-weight: bolder;


}




.choices2 button:hover {
height: 50px;

border-radius: 20px;
box-shadow: 3px 2px 5px rgb(11, 5, 5);
border: none;
font-weight: 600;
background-color: rgb(250, 217, 30);

transform: scale(1.05);

    transition: 0.3s;


}



.choices2 button {


    height: 50px;

border-radius: 20px;
box-shadow: 3px 2px 5px rgb(11, 5, 5);
border: none;
font-weight: 200;

display: none;

}


.choices2 a {

text-decoration: none;

}


.choicesRightDoor {


display: flex;
gap: 40px;

position: absolute;
text-align: center;
 top: 500px;
left: 620px; 
  
background: none;
border: none;
font-size: 40px;
font-weight: bolder;



}


.choicesRightDoor button:hover{

height: 50px;

border-radius: 20px;
box-shadow: 3px 2px 5px rgb(11, 5, 5);
border: none;
font-weight: 600;
background-color: rgb(250, 217, 30);

transform: scale(1.05);

    transition: 0.3s;




}





.choicesRightDoor button{

    height: 50px;

border-radius: 20px;
box-shadow: 3px 2px 5px rgb(11, 5, 5);
border: none;
font-weight: 200;

display:none ;



}




.choicesRightDoor a {

  text-decoration: none;  
}



.choiceswreck1 {


display: flex;
gap: 40px;

position: absolute;
text-align: center;
 top: 500px;
left: 620px; 
  
background: none;
border: none;
font-size: 40px;
font-weight: bolder;







}




.choiceswreck1 button:hover {

height: 50px;

border-radius: 20px;
box-shadow: 3px 2px 5px rgb(11, 5, 5);
border: none;
font-weight: 600;
background-color: rgb(250, 217, 30);
transform: scale(1.05);

    transition: 0.3s;
}



.choiceswreck1 button {

    height: 50px;

border-radius: 20px;
box-shadow: 3px 2px 5px rgb(11, 5, 5);
border: none;
font-weight: 200;

display: none;

 background-color: blanchedalmond ;
 opacity: 69%;

}




.choiceswreck1 a{
    text-decoration: none;
}

#continueGame {

    display: none;

}


.choiceSimbol {


display: flex;
gap: 40px;

position: absolute;
text-align: center;
 top: 500px;
left: 620px; 
  
background: none;
border: none;
font-size: 40px;
font-weight: bolder;


}





.choiceSimbol button:hover {


height: 50px;

border-radius: 20px;
box-shadow: 3px 2px 5px rgb(11, 5, 5);
border: none;
font-weight: 600;
background-color: rgb(250, 217, 30);

transform: scale(1.05);

    transition: 0.3s;



}


.choiceSimbol button {



   height: 50px;

border-radius: 20px;
box-shadow: 3px 2px 5px rgb(11, 5, 5);
border: none;
font-weight: 200;

display:none ;

 background-color: blanchedalmond ;
 opacity: 69%;

}



.choiceSimbol a{

text-decoration: none;

}





.choicesHill {


display: flex;
gap: 40px;

position: absolute;
text-align: center;
 top: 500px;
left: 570px; 
  
background: none;
border: none;
font-size: 40px;
font-weight: bolder;


}






.choicesHill button:hover {


height: 50px;

border-radius: 20px;
box-shadow: 3px 2px 5px rgb(11, 5, 5);
border: none;
font-weight: 600;
background-color: rgb(250, 217, 30);
transform: scale(1.05);

    transition: 0.3s;

}



.choicesHill button {
   height: 50px;

border-radius: 20px;
box-shadow: 3px 2px 5px rgb(11, 5, 5);
border: none;
font-weight: 200;

display: none;
 background-color: blanchedalmond ;
 opacity: 69%;


}



.choicesHill a{
     text-decoration: none; 
}



.TheRadioChoice button:hover {


height: 50px;

border-radius: 20px;
box-shadow: 3px 2px 5px rgb(11, 5, 5);
border: none;
font-weight: 600;
background-color: rgb(250, 217, 30);

transform: scale(1.05);

    transition: 0.3s;

}



.TheRadioChoice {


display: flex;
gap: 40px;

position: absolute;
text-align: center;
 top: 500px;
left: 570px; 
  
background: none;
border: none;
font-size: 40px;
font-weight: bolder;




}



.TheRadioChoice button {

  height: 50px;

border-radius: 20px;
box-shadow: 3px 2px 5px rgb(11, 5, 5);
border: none;
font-weight: 200;

display: none;
 background-color: blanchedalmond ;
 opacity: 69%;




}






.TheRadioChoice a {

  text-decoration: none;   
}













.choicesFacility {


display: flex;
gap:570px;

position: absolute;
text-align: center;
 top: 500px;
left: 360px; 
  
background: none;
border: none;
font-size: 40px;
font-weight: bolder;



}





.choicesFacility button:hover {

height: 50px;

border-radius: 20px;
box-shadow: 3px 2px 5px rgb(11, 5, 5);
border: none;
font-weight: 600;
background-color: rgb(250, 217, 30);

transform: scale(1.05);

    transition: 0.3s;




}






.choicesFacility button {

  height: 50px;

border-radius: 20px;
box-shadow: 3px 2px 5px rgb(11, 5, 5);
border: none;
font-weight: 200;

display: none;
 background-color: blanchedalmond ;
 opacity: 69%;


}



.choicesFacility a{

     text-decoration: none;   
}



.choicesFootPrints {


display: flex;
gap: 40px;

position: absolute;
text-align: center;
 top: 500px;
left: 570px; 
  
background: none;
border: none;
font-size: 40px;
font-weight: bolder;





}






.choicesFootPrints  button:hover {

height: 50px;

border-radius: 20px;
box-shadow: 3px 2px 5px rgb(11, 5, 5);
border: none;
font-weight: 600;
background-color: rgb(250, 217, 30);

transform: scale(1.05);

    transition: 0.3s;





}










.choicesFootPrints button {

 height: 50px;

border-radius: 20px;
box-shadow: 3px 2px 5px rgb(11, 5, 5);
border: none;
font-weight: 200;

display: none;
 background-color: blanchedalmond ;
 opacity: 69%;







}





.choicesFootPrints a {

  text-decoration: none;    
}

.backHomePage:hover{
box-shadow:5px 5px 7px yellow ;


opacity: 60%;
 transform: scale(1.05);

    transition: 0.3s;
}









.backHomePage {



position: absolute;

 top: 20px;
left: 1340px; 

border-radius: 20px;
height: 70px;
width: 60px;
font-size: x-large;
}





#tryAgain:hover {

height: 50px;

border-radius: 20px;
box-shadow: 3px 2px 5px rgb(11, 5, 5);
border: none;
font-weight: 400;
background-color: rgb(250, 217, 30);

transform: scale(1.05);
transition: 0.3s;

text-shadow: 5px 5px 7px black;




}







#tryAgain {
display: none;
position: absolute;

 top: 450px;
left: 46%; 

height: 50px;
width: auto;
font-size: x-large;

border-radius: 20px;
box-shadow: 3px 2px 5px rgb(11, 5, 5);
border: none;
font-weight: 200;
 background-color: rgb(141, 35, 35) ;
 opacity: 69%;



}


#tryAgainn:hover {

height: 50px;

border-radius: 20px;
box-shadow: 3px 2px 5px rgb(11, 5, 5);
border: none;
font-weight: 400;
background-color: rgb(250, 217, 30);

transform: scale(1.05);
transition: 0.3s;

text-shadow: 5px 5px 7px black;






}





#tryAgainn{

display: none;
position: absolute;

 top: 500px;
left: 46%; 

height: 50px;
width: auto;
font-size: x-large;

border-radius: 20px;
box-shadow: 3px 2px 5px rgb(11, 5, 5);
border: none;
font-weight: 200;
 background-color: rgb(141, 35, 35) ;
 opacity: 69%;




}



@media (max-width: 600px) {

  .game-container video{

    display: flex;
width: 100%;
background-color: black;
  aspect-ratio: 16 / 9;
  
  }


  
.game-container{position: relative;}


#playerName {

position: absolute;

}




  .backHomePage {


position: absolute;

 top: 260px;
left: 465px; 

border-radius: 20px;
height: 40px;
width: 10px;
font-size: x-large;

    
width: 10%;

  aspect-ratio: 16 / 9;


  }


.choices{

display: flex;
gap: 15px;
justify-content: center;
flex-direction: column;
text-align: center;
 top: 390px;
left: 25px; 
  aspect-ratio: 16 / 9;
background: none;
border: none;
font-size: 40px;
font-weight: bolder;



}
.choices button{
height: 40px;
 aspect-ratio: 16 / 9;
 font-size: 10px;
 background-color: blanchedalmond ;
 opacity: 69%;
}

   input {


text-align: center;
 top: 380px;
left: 177px; 
  
background: none;
border: none;
font-size: 20px;
font-weight: bolder;

}

}