/* General Styling for the body and layout */
body {
  background-color: #3d3d49; /* Dark background color for contrast */
  font-family: Arial, sans-serif; /* Default font family */
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
}

/* Styling for the main heading */
h1 {
  font-size: 3rem; /* Large font size for prominence */
  font-weight: bold;
  color: #65bf97; /* Custom green color for the heading */
  text-align: center;
  margin-top: 50px; /* Space between the top of the page and the heading */
}

/* Custom size class to adjust font size for player labels */
.custom-size {
  font-size: 1.5rem; /* Adjust font size to emphasize player names */
}

/* Custom Color Class */
.custom-color {
  color: #65bf97; /* Set text color to match theme */
  font-weight: bold;
}

/* Styling for the dice container (Player 1 & Player 2) */
#dice-1,
#dice-2 {
  text-align: center; /* Center text and elements in the dice containers */
}

/* Styling for dice images for both players */
#dice-1 img,
#dice-2 img {
  width: 120px; /* Adjust the dice image size */
  height: auto; /* Maintain aspect ratio of the dice image */
  margin-top: 20px; /* Space between player name and dice image */
}

/* Styling for the score display of both players */
#score-1,
#score-2 {
  font-size: 2rem; /* Set larger font size for player scores */
  color: #65bf97; /* Set text color to match theme */
  margin-top: 10px; /* Space between the dice image and the score */
}

/* Styling for the result box (e.g., to display winner) */
#resultBox {
  font-size: 2.5rem; /* Larger font size for emphasis on result */
  font-weight: bold;
  color: #65bf97; /* Set text color to match theme */
}

/* Styling for the roll dice button */
#roll-dice-btn {
  background-color: #65bf97; /* Green background to match theme */
  color: #3d3d49; /* Dark text color for contrast */
  border: none; /* Remove default border */
  font-size: 1.5rem; /* Larger font size for readability */
  font-weight: bold;
  padding: 10px 20px; /* Padding around the button for better spacing */
  margin-top: 30px; /* Space above the button */
  border-radius: 10px; /* Rounded corners for modern look */
  cursor: pointer; /* Show pointer cursor on hover */
  transition: background-color 0.3s ease; /* Smooth color change on hover */
}

/* Hover effect for the roll dice button */
#roll-dice-btn:hover {
  background-color: #58a47e; /* Slightly darker green when hovered */
}

/* Responsive Design for smaller screens */
@media (max-width: 768px) {
  /* Adjust heading size for smaller screens */
  h1 {
    font-size: 2.5rem;
  }

  /* Adjust result box font size for smaller screens */
  #resultBox {
    font-size: 2rem;
  }

  /* Adjust button font size for smaller screens */
  #roll-dice-btn {
    font-size: 1.2rem;
  }

  /* Reduce the dice image size for smaller screens */
  #dice-1 img,
  #dice-2 img {
    width: 90px;
  }
}

/* Font family classes using the Lobster Two font */
.lobster-two-regular {
  font-family: "Lobster Two", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lobster-two-bold {
  font-family: "Lobster Two", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/* Italic variations of the Lobster Two font */
.lobster-two-regular-italic {
  font-family: "Lobster Two", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.lobster-two-bold-italic {
  font-family: "Lobster Two", sans-serif;
  font-weight: 700;
  font-style: italic;
}