/* 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 {
  color: white;
  font-family: "Comic Sans MS", cursive, sans-serif;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 0, 1) 100%), url("https://mcdn.wallpapersafari.com/small/67/24/go9qO1.jpg");  
  background-size: cover;          /* Ensures the image covers the entire viewport without stretching */
  background-repeat: no-repeat;    /* Prevents the image from repeating/tiling */
  background-position: center;     /* Centers the background image in the viewport */
  background-attachment: fixed;    /* Makes the background image stay in place when scrolling (optional) */
  background-color: #f5bb00;       /* Always set a fallback background color */

}

.button-container {
    display: flex; /* Arranges buttons in a row */
    justify-content: center; /* Centers the buttons horizontally */
    gap: 20px; /* Adds space between buttons */
    margin-top: 50px; /* Adds some space from the top */
}

.button {
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    color: black; /* White text */
    font-family: "Comic Sans MS", cursive, sans-serif;
    padding: 15px 30px; /* Padding inside the button */
    border: 4mm ridge; 
    cursor: pointer; /* Changes cursor to pointer on hover */
    font-size: 16px; /* Font size */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

.button:hover {
    background-color: #ffffff; /* Darker green on hover */
}