@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

body {
    background-image: url('assest/back-img.jpg'); 
    background-size: cover;
    background-position: center; 
    background-repeat: no-repeat; 
    background-attachment: fixed;
    position: relative;
}

@media (max-width: 768px) { 
    body {
        background-image: 
            url('assest/back-img.jpg'); 
        background-size: contain; 
        background-position: top, bottom; 
        background-repeat: repeat; 
    }
}


/* Dark overlay to reduce vibrance */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2); 
    z-index: -1; /* Ensures it stays behind content */
}

.board {
  width: 540px;  
  height: 460px; 
  background-color: #dee28e; 
  border-radius: 20px; 
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3); 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px; /* Space inside */
}

.board tr { 
  display: flex;
  justify-content: center;
}

.board td {
  width: 70px; /* Set a fixed size for cells */
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.board button {
  width: 40px;  /* Adjust button size independently */
  height: 40px;
  background-color: gray;
  margin: 5px;
  border: none;
  border: 2px solid rgba(0, 0, 0, 0.4); 
  border-radius: 50%;
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.5);
}

@keyframes vibrate {
  0% { transform: translateX(-3px); }
  100% { transform: translateX(3px); }
}

.vibrate {
  animation: vibrate 0.1s infinite alternate;
}

h1, h2, h3 {
  text-align: center;  
  font-family: Arial, sans-serif;  
}


h1 {
  font-size: 2.5rem; 
  font-weight: bold;
  color: aliceblue;
  margin-top: 30px; 
  margin-bottom: 20px; 
  text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.7);
  font-family: 'Press Start 2P', cursive;
}


h2 {
  font-size: 1.8rem;
  color: aliceblue;
  margin-bottom: 5px;
}


h3 {
  font-size: 1.5rem;
  color: aliceblue;
  margin-bottom: 30px; 
}