/* General reset */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: url('./paper texture.png') center/cover no-repeat; /* Paper-like background */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  font-family: Arial, sans-serif; /* Optional: Add your preferred font */
}

/* Buttons container (3 buttons across the top) */
.buttons {
  display: flex;
  justify-content: center;
  gap: 20px; /* Space between buttons */
  margin-top: 20px; /* Add spacing at the top */
}

/* Button styles */
.button {
  width: 30%; /* Set a fixed or responsive width */
  height: auto; /* Let the browser calculate the height based on the original image aspect ratio */
  background: rgba(0, 0, 0, 0); /* Transparent background */
  cursor: pointer;
  border: none; /* No borders */
  outline: none; /* No focus outline */
  transition: transform 0.2s ease, background-color 0.2s ease;
}

/* Animation on Click */
.button:active {
  animation: bounce 0.3s ease;
  background-color: #005a9e; /* Optional: darken color */
}

/* Bounce Keyframes */
@keyframes bounce {
  0% {
    transform: scale(1); /* Start at normal size */
  }
  50% {
    transform: scale(1.1); /* Grow slightly */
  }
  100% {
    transform: scale(1); /* Return to normal size */
  }
}


/* Booking image styles */
.booking-image {
  display: block; /* Ensures it's treated as a block element for spacing */
  margin: 40px auto 0; /* Space above the image, center align */
  width: 90%; /* Set a width to keep it consistent with buttons */
  height: auto; /* Maintain aspect ratio */
  cursor: pointer; /* Pointer cursor to indicate it's clickable */
}

/* Nolen Guy Image */
.nolen-guy {
  margin-top: 40px; /* Space between buttons and the image */
  max-width: 60%; /* Adjust based on how large you want "Nolen Guy" */
  height: auto; /* Maintain aspect ratio */
}




@media (max-width: 768px) {

  .nolen-guy {
    max-width: 80%; /* Scale down "Nolen Guy" further for smaller devices */
  }
}