@font-face {
  font-family: vaisseau;
  src: url("StarWars.ttf");

}
@font-face {
  font-family: etoile;
  src: url("star.ttf");

}

html{
  background-color: black;
}
header{
  padding:0.5em;
  background-color: lightgrey;
  border:3px black solid;
  border-radius: 15px;
}
main{
  text-align: center;
  -margin:1em auto;
  overflow: hidden;
  padding:2em 0 0 0;
}
main p{
  color:white;
}
footer{
  text-align: center;
  padding:3em;
}
#vie {
  opacity:1;
}
#zone-texte{
  float: left;
  width:40%;
}
#zone-jeu{
  float: left;
  width:60%;
}
#hud{
  background-color: lightgrey;
  border:3px black solid;
  padding:1em 0;
  border-radius: 15px;
}
#hud h1{
  border:1px black solid;
  background-color: black;
  color:white;

}
#historique{

}
#hud .blocNavire {
  display: block;
  width:100%;
  padding: 0.5em 0;
}
a {
  padding:1.5em;
  background-color: grey;
  border:1px solid black;
  border-radius: 15px;
  color:white;
  text-decoration: none;
}
a:hover{
  color:grey;
  background-color: white;
}
img{
  width:40%;

  border: solid white 4px;
  border-radius: 15px;
}
h1 {
  font-size: 1.5em;
  text-align: center;
}
h2 {
  display: block;
  font-size: 1em;
  width: 100%
}
h3 {
  text-align: center;
}
td{
  -padding: 10px;
  border:black 1px solid;
  background-color: lightblue;
  width:3em;
  height:3em;
}
th{
  background-color: blue;
  color:white;
}
table {
  text-align: center;
  margin:0 auto;
  max-width: 100%;
}
table .navireX {

  background-color: lightblue;
  border-color:black;
}
table .navireX::after{
  font-family: vaisseau;
  content: '}';
  color:black;
  font-size: 2em;
}
/*-------------------------------------------------------afficher les navires*/
/*table .navire {
  background-color: black;
  border-color:white;
}
table .navire::after{
  content: '⚓';
  color:white;
  font-size: 2em;
}*/
/*-----------------------------------------------------*/
.manque {
  background-color: black;
}
table .manque::after{

  content: " ";
  color:black;
  font-size: 1em;
}
.touche {
  background-color: red;
}
table .touche::after{
  font-family: etoile;
  content: '#';
  color:white;
  font-size: 1.5em;
}
table .bouton:hover{
  border:1px solid red;
  background-color: #ffCCFF;
  content:'X';
}
table .bouton:hover::after{
  content: 'X';
  color:red;
}
header strong {
  color:#aa0000;
  padding:0;
  border:none;

}
.blocNavire {
  -background-color: #ccffee;
}
strong {
  color:black;
  font-weight: normal;
  padding:1em;
  -border:1px black solid;
  -border-radius: 15px;
}
em {
  text-decoration: underline;
  font-style: normal;
}
/* ==========================================================================
   Media Queries
   ========================================================================== */

   /*------------------------ mobile*/

@media only screen and (max-width:750px){
  html {
    font-size: 0.8em;
  }
  header p{
    margin:0;
  }
  a {
    padding:0.5em;
    display: block;
  }
  h1 {
    font-size: 1.3em;
  }
  td{
    width: 25px;
    height: 25px;
    padding:0;
  }
  table .manque::after{
    content: '☹';
    color:black;
    font-size: 2em;
  }
  table .touche::after,
  table .manque::after,
  table .navireX::after
  {
    font-size: 1.5em;
  }
  footer{
    margin:0;
  }
}