body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}

#game-board {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 300px;
}

h1 {
  text-align: center;
}

.hand {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.card {
  padding: 10px;
  margin: 0 3px;
  border: 1px solid #ddd;
  border-radius: 3px;
  cursor: pointer;
  position: relative; /* So the symbols can be positioned within the card */
  font-size: 24px; /* Adjust as needed for desired size */
  text-align: center; /* Center the main value */
}

.card-symbol {
  font-size: 16px; /* Adjust to the desired size */
}

.top-symbol {
  position: absolute;
  top: 5px;
  left: 5px;
}

.bottom-symbol {
  position: absolute;
  bottom: 5px;
  right: 5px;
}

.center-value {
  display: block;
}

.card.selected {
  background-color: #ddd;
}

.buttons-row {
  display: flex;
  justify-content: space-between;
}

button {
  padding: 10px 15px;  /* increased padding for larger buttons */
  font-size: 16px;    /* larger font size for buttons */
  cursor: pointer;
  border: none;
  background-color: #007BFF;
  color: white;
  border-radius: 4px;
  transition: background-color 0.2s;
}

button:hover {
  background-color: #0056b3;
}

.hearts, .diamonds {
  color: red;
}

.clubs, .spades {
  color: black;
}

.dropdown {
  position: relative;
  display: inline-block;
  z-index: 1; /* Ensures dropdown appears above other content */
  top: 10px;
  left: 10px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 150px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 8px 12px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.hidden {
  display: none;
}

#about-btn {
  margin: 0;         /* Removes any margins. */
  padding: 5px;     /* Adjust as needed. You might want a small padding for aesthetics. */
  position: absolute; /* This makes sure the button will be positioned relative to the closest positioned ancestor. */
  top: -40px;         /* Adjust this to move it up or down. */
  left: -25px;        /* Adjust this to move it left or right. */
}

/* Responsive styles for mobile view */

@media only screen and (max-width: 768px) {
    #game-board {
        width: 90%; /* Makes the game board take up 90% of the screen width on mobile */
    }

    .card {
        font-size: 32px;  /* Increase font size of cards for better readability */
    }

    .card-symbol {
        font-size: 20px; /* Increase the card symbol font size */
    }

    button {
        padding: 12px 18px;  /* slightly larger buttons */
        font-size: 18px;    /* larger font size for buttons */
    }
}