/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-image: url('/Images/background.jpg'); 
  background-repeat: repeat;       
  background-size: cover;            
  background-position: center;      
  background-attachment: fixed;      
  margin: 5;                        
  padding: 0;                       
  color: #FFD700;
  font-family: "Silkscreen", sans-serif;
  font-weight: 400;
  font-style: normal;
}

h1 {
  font-size: clamp(1.75rem, 5vw, 4rem); /* scales between ~28px and ~64px */
  line-height: 1.05;
  margin: 5 5 5rem;
  color: #FFD700;
 
  -webkit-text-stroke: 1.5px white; /* Stroke width and color for WebKit browsers */
 
  /* Optional: add some text shadow for better visibility */
  text-shadow:
    1px 1px 0 #FFD700,
    -1px -1px 0 #FFD700,
    1px -1px 0 #FFD700,
    -1px 1px 0 #FFD700;

  text-align: center;
}
 
 .bubble-container {
  /* existing styles */
  background: linear-gradient(to bottom, rgba(255,255,255,0.6), rgba(0,0,0,0.6));
  color: #b8860b; /* darker gold */
  padding: 20px 30px;
  border-radius: 30px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  max-width: 800px;
  margin: 20px auto;
  font-size: 1.400rem;
  line-height: 1.5;
}


.bubble-container  {
  color: #b8860b; /* darker gold */
  -webkit-text-stroke: 0.5px #4b3b00; /* dark stroke for contrast */
  text-shadow:
    1px 1px 0 #4b3b00,
    -1px -1px 0 #4b3b00,
    1px -1px 0 #4b3b00,
    -1px 1px 0 #4b3b00; /* fallback shadow for stroke effect */
}




p {
  text-align: center;
} 

ul {
  list-style-type: none;  /* Removes the bullet dots */
  display: flex;          /* This is the key: it lines them up in a row */
  flex-direction: row;    /* Explicitly sets it to row (horizontal) */
  justify-content: center; /* Centers the whole row of buttons */
  gap: 15px;              /* Adds a little space between the buttons */
  padding: 0;
  margin: 0;
}

/* This styles the button elements inside your list */
ul li button {
  /* Using your preferred styling */
  background-color: #AD6d15;
  color: #79380B;
  padding: 12px 24px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-family: "Silkscreen", sans-serif;
  transition: background-color 0.3s ease;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
  /* Optional: add a subtle shadow for depth */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

ul li button:hover {
  background-color: #EFBB55;
  color:#FEE39F;
  transform: scale(1.1) translateY(-5px); /* slightly bigger and lifted */
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2); /* stronger shadow on hover */
   animation: bounceUp 0.4s forwards;

}
@keyframes bounceUp {
  0% {
    transform: scale(1) translateY(0);
  }
  50% {
    transform: scale(1.1) translateY(-10px);
  }
  70% {
    transform: scale(1.05) translateY(-5px);
  }
  100% {
    transform: scale(1.1) translateY(-7px);
  }