@font-face {
  font-family: 'Big Caslon Medium';
  src: url('big-caslon-medium.woff2') format('woff2'),
       url('big-caslon-medium.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'Big Caslon Medium', 'Playfair Display', sans-serif;
  text-align: center;
  background-color: #f5f5f5;
}

.container {
  max-width: 600px;
  width: 60%;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

button {
  font-family: 'Lato', sans-serif; /* Ensure buttons also use Lato */
  background: linear-gradient(145deg, #55460142, #423a31c2); /* Gold gradient */
  color: white; /* White text for high contrast */
  border: 1px solid #625548; /* Dark gold border for more emphasis */
  padding: 10px 25px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

button:hover {
  background: linear-gradient(145deg, #808080, #c0c0c0); /* Inverted gradient on hover */
  color: #f5f5f5;
}

.button-end-game {
background: linear-gradient(145deg, #606060, #303030); /* Darker gradient */
color: #ffffff; /* Keep the text white for better readability */
}

.button-end-game:hover {
background: linear-gradient(145deg, #303030, #606060); /* Inverted gradient on hover */
}

.choice {
margin: 5px;
padding: 8px 16px; /* Adjust padding to fit your design */
font-size: 16px;   /* Optional, adjusts font size for better readability */
border: 1px solid black; /* Transparent border to maintain size */
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;  
}

.choice:hover {
  background: linear-gradient(145deg, #808080, #c0c0c0); /* Inverted gradient on hover */
  color: #f5f5f5;
}

.choice.button-selected:hover {
  /* Keep the selected style even on hover */
  background: linear-gradient(145deg, #55460142, #423a31c2);
}

.button-selected, .button-selected:hover, .button-selected:active {
background: linear-gradient(145deg, #55460142, #423a31c2); /* Gold gradient */
color: white; /* White text for high contrast */
border: 1px solid #625548; /* Dark gold border for more emphasis */
}

#choices {
  display: none;  /* Hide the entire container for the choices */
 } 

#feedback {
font-weight: bold;
margin-top: 15px;
font-size: 18px;
font-family: 'Lato', sans-serif;
color: #423222;
height: 25px;  /* Ensures a fixed height */
line-height: 25px;  /* Vertically centers text in the fixed height
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}

#feedback.feedback-visible {
opacity: 1;  /* Increased specificity with ID */
}

#aboveStart {
  margin-top: 20px;
}

#playerName {
  width: 110px;  /* Adjust the width as necessary */
  padding: 10px 10px; /* Padding to match the button */
  margin: 5px auto; /* Center align */
  display: block; /* Make the input block level */
  &::placeholder {
  text-align: center;
    }
  font-size: 14px; /* Match font size with the button */
  font-family: 'Lato', sans-serif;
  border: 1px solid #ccc; /* Give the input field a defined border */
}

#leaderboard {
  font-family: 'Big Caslon Medium', serif; /* Match the font style with the question box */
  color: #333; /* Dark color for text, matching question box */
  background-color: #f0f0f0; /* Light background, matching question box */
  border: 1px solid #ccc; /* Subtle border, matching question box */
  padding: 10px 25px 25px 25px;
  border-radius: 5px; /* Rounded corners */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
  text-align: center;
  margin: 40px auto; /* Centered with space */
  width: 50%; /* Limiting width for better text display */
  display: block; /* Ensure it is a block element to center it */
}

#leaderboard h3 {
  color: #625349; /* Set the color of the leaderboard heading to gold */
  font-weight: bold; /* Keep the heading bold if you prefer */
  font-size: 20px;
}

#leaderboard p {
  font-weight: normal;
  font-size: 18px;
  margin: 10px 0; /* Adjust spacing between each score for tighter layout */
  font-family: 'Big Caslon Medium', serif; /* Match the font style with the question box */
}

#question {
  font-family: 'Big Caslon Medium', serif;
  font-size: 24px;
  font-weight: 700;
  color: #333;
  background-color: #f0f0f0; /* Light background */
  border: 1px solid #ccc; /* Subtle border */
  padding: 20px;
  border-radius: 5px; /* Rounded corners */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  text-align: center;
  margin: 20px auto; /* Centered with space */
  width: 50%; /* Limiting width for better text display */
}

#question img {
max-width: 40vw; /* 40% of the viewport width */
max-height: 40vh; /* 40% of the viewport height */
height: auto; /* Maintain aspect ratio */
width: auto; /* Maintain aspect ratio */
display: block; /* Ensures the image is block level to center it easily */
margin: 10px auto; /* Center the image horizontally and add some space */
}

#shareButton {
  display: none;  
  margin: 20px auto;  
  padding: 10px 20px;  
  font-size: 16px;  
  cursor: pointer;  
  font-family: 'Lato', sans-serif; /* Ensure buttons also use Lato */
  background: linear-gradient(145deg, #55460142, #423a31c2); /* Gold gradient */
  color: white; /* White text for high contrast */
  border: 1px solid #625548; /* Dark gold border for more emphasis */ 
  border-radius: 5px;
}

#shareButton:hover {
  background: linear-gradient(145deg, #808080, #c0c0c0); /* Inverted gradient on hover */
  color: #f5f5f5;
}