/*font-family: 'Monoton', cursive;
font-family: 'Orbitron', sans-serif;
font-family: 'Rock Salt', cursive;
font-family: 'Indie Flower', cursive;
font-family: 'Pacifico', cursive;
font-family: 'Lobster Two', cursive;
*/

body {

  background: url("../Images/107611.jpg");
  background-size: 115%;
  background-repeat: no-repeat;
  position: relative;
  font-family: 'Pacifico', cursive
  font-weight: bold;
}
h1 {
  
  font-family: 'Rock Salt', cursive;
  text-align: center;
  font-size: 50px;
  font-weight: bold;

}\
  
p {

  font-family:'Orbitron', sans-serif;
  text-align: center;
  font-size: 20px;
  font-weight: italic;

}
.container {

  position: relative;
  max-width: 960px;
  margin: 0 auto;
  
 
  /*display:inline-block;*/
}

.Battle_ground {

  width : 400px;
  height :400px;
  display:inline-block;
}

.playgrid{

  height:125px;
  width:115px;
  background: rgba(31, 46, 52, 0.95);
  display: inline-block;
  border: solid 1px rgb(54, 56, 54);
  text-align: center;
  font-size:45px;
  border-radius: 10px;

} 

.playgrid:hover {
  opacity: 0.5;
  cursor: pointer;
}

.MessageBoard {
  background-color: rgba(54, 57, 89, 0.62);
  height: 400px;
  width: 200px;
  display: inline-block;
  position: absolute;
  right: 150px;
  top: 115px;
  border-radius: 20px;
  text-align: left;
  overflow: scroll;
  visibility: hidden
}


.selectors {
  width: 200px;
  height: 400px;
  background-color:rgba(66, 44, 38, 0.85);
  border:solid 1px rgb(19, 21, 19);
  border-radius: 20px;
  position: absolute;
  display: inline-block;
  right: 375px;
  top: 115px;
  text-align: left;
   margin: auto;
  line-height: 1;
  font-weight: bold;
  font-size: 33px;
  visibility :hidden;
}
.settings {

  visibility :hidden;
}
.imgs {
  position: relative;
  display: inline-block;
  height :75px;
  width :75px;
  left:20px;
  border-radius:10px;
  visibility: hidden
}

.yoda {

  background : url(../Images/Yoda1);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 75%;
  height:110px;
  width:100px;
  display: inline-block;
  -webkit-transform:rotate(180deg);
  transform: rotateY(180deg);
  transition: all 1s ease-in-out;
 
}

.yoda2 {

  background : url(../Images/Yoda2);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 75%;
  height:110px;
  width:100px;
  display: inline-block;
  -webkit-transform:rotate(180deg);
  transform: rotateY(180deg);
  transition: all 1s ease-in-out;
 
}

.darth {


  height:110px;
  width:100px;
  display: inline-block;
 /* margin-right: 5px;*/
  background : url(../Images/Darth1);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 90%;
  transform: rotateY(180deg);
  transition: all 1s ease-in-out;

}

.darth2 {


  height:110px;
  width:100px;
  display: inline-block;
 /* margin-right: 5px;*/
  background : url(../Images/Darth2);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 90%;
  transform: rotateY(180deg);
  transition: all 1s ease-in-out;

}

.yodalaugh {
  
  background : url(../Images/YodaCelebrates.jpg);
  background-repeat: no-repeat;
  display: inline-block;
  width : 400px;
  height :400px;
  background-size: 90%;
  transition: all 2s ease-in-out;

}

.darthlaugh {
 
  background : url(../Images/DarthCelebrates.jpg);
  background-repeat: no-repeat;
   display: inline-block;
  width : 400px;
  height :400px;
   background-size: 90%;
  transition: all 2s ease-in-out;


}