/* styles.css 
   Project: 
   Author: 
   Date: 
	
   Helpful links: 
   	Web colors: 
   		https://en.wikipedia.org/wiki/Web_colors#X11_color_names
	Color picker tool:
		https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool
		http://colorpicker.com

*/

#map {
   width: 100vw;
   height:100vh;
   margin: auto;
/*   margin-bottom: 30px;*/
   border: 5px solid white;;
}

.title{
   font-family: 'Montserrat', sans-serif;
   padding:20px;
}

.credit{
font-family: 'Montserrat', sans-serif;
font-size:0.75em;
text-align:right;
}

.type{
   font-family: 'Montserrat', sans-serif;
   text-align:center;
}

.big{
   position:relative;
   width:100vw;
   height:auto;
}

.back{
   width:100%;
}

.player,.b1{
   position:absolute;
   height:25%;
   border:5px solid transparent;
}

.player:hover{
  filter: hue-rotate(180deg) brightness(10);
  cursor:pointer;
}

.b1{
   top:35%;
   left:5%;
}

.p1{
   bottom:20%;
   left:20%;
}

.p2{
   top:10%;
   left:40%;
}

.p3{
   right:10%;
   top:3%;
}

.p4{
   left:65%;
   top:35%;
}

.p5{
   right:40%;
   bottom:10%;
}

.textbox{
   
}


.text{
   display:none;
   position:absolute;
   background-color:white;
   color:black;
/*   height:50%;*/
   width:50%;
   padding:20px;
   padding-top:-5px;
}

.text p{
   margin:auto;

   width:90%;
   
}

.x{
   position:absolute;
   top:-5px;
   right:20px;
   text-align:right;
   margin-right:0px;
   display:none;
   color:transparent;
}

.x:hover{
   cursor:pointer;
}

.t1{
   right:10%;
   top:45%;
}

.t2{
   right:5%;
   top:40%;
}

.t3{
   left:20%;
   top:10%;
}

.t4{
   left:5%;
   top:30%;
}

.t5{
   left:5%;
   top:5%;
}

.clickbox{
   position:absolute;
   top:0px;
   width:100%;
   height:100%;
   display:none;
   z-index:5;
}

.clickbox:hover{
   cursor:pointer;
}

@media only screen and (max-width: 475px) {
   .x{
      color:black;
   }

   .text,.t1,.t2,.t3,.t4,.t5{
      width:auto;
      height:100%;
      bottom:0px;
      top:0px;
      right:0px;
      left:0px;
      background-color:rgba(255,255,255,0.9);
      padding:0px;
   }

   .clickbox{
      width:0%;
      height:0%;
   }

   .text p{
      margin-top:10%;
   }
}

@media only screen and (max-width: 300px) {
   p{
      font-size:0.7em;
   }

   .text{
      bottom:0px;
   }
}