body {
  font-family: 'Poppins', sans-serif;
  color:rgb(255, 132, 0); 
    text-align: center; background-color: #F5EFDE;
    background-size: cover;
  }
  
  #myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: 0;
    object-fit: cover;
}

  .content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 20px;
} 

h1{
  font-size: 65px;
  padding-top: -20%;
}

h2{
  padding-top: -35%;
}

#restartButton {
  display: none;
  opacity: 0;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 15px 30px;
  font-size: 20px;
  background-color: #1a93d9;
  font-family: 'Poppins', sans-serif;
  border: none;
  border-radius: 50px;
  color: #ff7b00;
  cursor: pointer;
  transition: opacity 0.5s ease;
  z-index: 5;
}

#restartButton.show {
  display: block;
  opacity: 1;
}


  #board {
    width:540px;
    height:540px;
    /* background-color: #F5EFDE; */
    
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    background-size: cover;
    border-radius: 25px;
  }
  #board div {
    /*board = 540x540, divide into 3x3 tile --> 180x180 per div*/
    width: 180px;
    height: 180px;
    background-color: rgb(255, 132, 0);
    background: radial-gradient(circle, #C76F3C 0%, #c76f3c50 40%, #ffffff00 100%);
  border-radius: 100%;
  }

  #board div img {
    /*all img tags inside the tile div tags*/
    width: 150px;
    height: 150px;
    
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
  }