/* styles.css */

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Full viewport height */
}

header {
  background-color: #333;
  color: #fff;
  padding: 0; /* No padding to ensure image is flush with the top and sides */
  text-align: center;
  margin: 0; /* No margin to ensure image is flush with the top and sides */
}

.header-text {
  background-color: #333; /* Dark grey background */
  color: #fff;
  padding: 0 20px 20px; /* Padding on the sides and bottom */
  text-align: center;
  margin: 0; /* No margin */
}

.header-text h1,
.header-text p {
  margin: 0; /* Reset margins */
  padding: 10px 0; /* Padding at the top and bottom for spacing */
}

nav {
  background-color: #444;
  padding: 10px 0;
  text-align: center;
}

nav a {
  color: #fff;
  text-decoration: none;
  padding: 10px 20px;
  display: inline-block;
  margin: 0 5px;
  white-space: nowrap;
}

nav a:hover {
  background-color: #666;
}

nav a.active {
  background-color: #32CD32; /* Lime green active button */
  color: #ffffff;
}

main {
  padding: 20px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex: 1; /* Grow to occupy the available space */
  margin-bottom: 60px; /* Same height as the footer */
}

#backgammonBoardContainer {
  max-width: 800px; /* Adjust as needed */
  margin: auto;
}

#backgammonBoard {
  border: 1px solid #5a432e; /* Dark brown border */
  background-color: #deb887; /* Burlywood background */
  display: block; /* Ensures the canvas is block-level for centering */
  margin: 20px auto; /* Centers the canvas horizontally with margin */
}

footer {
  background-color: #333;
  color: #fff;
  padding: 10px 20px;
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px; /* Set a fixed height for the footer */
  box-sizing: border-box; /* Include padding and border in the height */
}

/* Add any additional styles you need for the game interface below */
/* ... */