/*  button {
  type="button"
  padding: 5px 10px;
  font-size: 25px;
  font-family: "Lucida Console", "Courier New", monospace;


}
*/

.title{
  font-size: 80px;
  font-family: Impact, Arial, Helvetica, sans-serif;
  letter-spacing: 7px;
  background: linear-gradient(to right, #f32170,
          #ff6b08, #cf23cf, #eedd44);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-color: transparent;
  }


  /* Define a container for the buttons */
.button-container {
    display: flex; /* Use flexbox to create a responsive grid */
    flex-wrap: wrap; /* Allow the buttons to wrap to multiple rows */
    gap: 1%; /* Add a 10px gap between the flex items */
    max-width: 1000px;
    z-index: 1;
    font-size: 80px;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 2px;
    color: aliceblue;
    -webkit-text-fill-color: aliceblue;
  }


  .button-container :hover {
    transform: scale(1.05);
    transition-duration: .2s;
    transform-style: ease;
    z-index: 2;

  }


  .button-container :not(:hover){
    transform: scale(1);
    transition-duration: .2s;
    z-index: 1;


  }

  /* Define the styling for the buttons */
  .button {
  /*  background-image: url(path/to/image); /* Set the background image */
    background-size: contain; /* Scale the image to fit the button */
    width: 24%; /* Set the width of the button to 25% of the container */
    height: 23.6vw; /* Clear the default height */
    /*padding-bottom: 50%; /* Set the aspect ratio of the button to be a square */
    position: relative; /* Allow for absolute positioning of the title */
    max-height: 240px;
  }

  /* Define the styling for the button titles */
  .button .title {
    position: absolute; /* Position the title absolutely */
    bottom: 0; /* Align the title to the bottom of the button */
    left: 0; /* Align the title to the left of the button */
    right: 0; /* Align the title to the right of the button */
    padding: 10px; /* Add some padding to the title */
    background-color: rgba(120, 173, 189, 0.5); /* Give the title a semi-transparent black background */
    color: white; /* Set the text color to white */
    text-align: center; /* Center the text */
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 30px;
    letter-spacing: normal;
    transform: none;
    background: none;
    background-color: rgba(179, 131, 70, 0.5);
    background-clip: border-box;
    -webkit-background-clip: border-box;
    -webkit-text-fill-color: whitesmoke;
    
    
  }

  /* Define the styling for the first button */
  .button1 {
    background-image: url(CookieClicker.png);
  }

  /* Define the styling for the second button */
  .button2 {
    background-image: url(Slope.jpg);
  }

  /* Define the styling for the third button */
  .button3 {
    background-image: url(2048.png);
  }

  /* Define the styling for the fourth button */
  .button4 {
    background-image: url(path/to/image4);
  }