html{
  padding: 0;
  margin:0;
}

body
  {
  background-color:black;
    padding: 0;
    margin: 0;
    font-family: Arial;
    background-attachment: fixed;
  }

.board{
  background-color: rgba(0, 0, 0, 0.797);
  height: 100%;
  min-height: 100vh;
  margin: 0%;
}

@media screen and (max-width: 768px) {
  canvas {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .msg-mobile {
    display: none;
  }
}

canvas{
  margin: auto;
  border: 10px solid black;
}

.canvas_container{
  text-align: center;
  padding:10px;
  }

button{
  width:100%;
  text-align:center;
}

h1{
  color: rgb(220, 220, 220);
  text-shadow: 0 0 2px black;
  font-weight: bolder;
  text-align: center;
  padding: 5px;

}

h3{
  color: rgb(210, 210, 210);
  text-align: center;
  padding: 5px;
  box-shadow: 0 0 2px white;
}

.message{
  color: white;
  font-size: small;
  width: 100%;
  padding:5px;
}

.line{
  width: 100%;
  border: 0.5px black solid;
  margin:auto;
}

.best-pict{
  width:100px;
  height:100px;
  margin:auto;
  border: 2px solid rgb(255, 255, 255);
  box-shadow: 0 0 10px rgb(0, 0, 0);
  overflow:hidden;
}

.profil-picture{
	object-fit: cover;
	position:center;
	width:100%;
  height:100%;
}

h4{
  text-align:center;
  background-color:rgb(210, 210, 210);
  color:rgb(35, 35, 35);
  padding:5px;
  font-size:small;
  box-shadow: 0 0 10px rgb(0, 0, 0);


}

.commentaire{
  width:100%;
}

.highScores{
  padding:10px;
  background-color: white;
  box-shadow: 0 0 2px white;
}