.hidden {
  display: none;
}
#mapWrapper {
  opacity: 0.5;
  transition: opacity 0.3s ease;
 position: fixed;
  width: 500px;      
  height: 500px;   
  bottom: 75px;   
  right: 25px;
}
#mapWrapper:hover{
  opacity: 1;
}
.dot {
  pointer-events: none;
}


#map {
  display: block;
}


.botUI{
  position:fixed;
  bottom: 10px;
  left: 10px;
  color:aliceblue;

}
.subtext{
  position: fixed;
  top: 10px;
  left: 10px;
  color: aliceblue;
}

#layers {
  position: relative;
  bottom:10px;
  display: flex;           
  flex-wrap: nowrap;       
  gap: 10px;                
 
  
}
.lockin{
  opacity: 0.7;
  transition: opacity 0.3s ease;
  position:fixed;
  bottom: 25px;
  left: 40%;
  width:300px; 
  height: 100px;
  font-size: 32px;
}
.lockin:hover{
  opacity: 1;
}
#scene {
  position: fixed;     
  top: 0;
  left: 0;
  width: 100vw;        
  height: 100vh;       
  background-image: url('images/background.jpg');
  background-size: cover;
  background-position: center;
  z-index: -1;          
}
#finish{
  position: fixed;
  top:50%;
  left:40%;
  width:300px; 
  height: 100px;
  font-size: 32px;

}
#startScreen{
  position:fixed;
  top:30%;
  left:40%;
  color: aliceblue;

}
.startp{
  position: relative;
  left:12%;
  
}


#startbtn{
  opacity: 0.7;
  transition: opacity 0.3s ease;
  position: relative;
  left:25%;
  width:  200px;
  height: 80px;
  font-size: 32px;
}
#startbtn:hover{
  opacity:1;
}
body{
  
  background-color: #000000; /* fallback color */
  background-image: url('images/oceanbg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

 

#finishscore{
  color: aliceblue;
  position: fixed;
  left:40%;
  top:40%;
  width:300px;
  height: 100px;
  font-size: 32px;
}
#fih{
  position:fixed;
  top:25px;
  right:25px;
  pointer-events: none;
}