/* 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 {
  /* 1. Set your image file path */
  background-image: url('GUI-BRBscreenBG.jpg');

  /* 2. Prevent the image from repeating */
  background-repeat: no-repeat;

  /* 3. Scale the image to cover the entire window */
  background-size: cover;

  /* 4. Center the background image */
  background-position: center;

  /* 5. Keep the background fixed while scrolling */
  background-attachment: fixed;
  font-family: Vabedo;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 20px;
  align-items: flex-start;
  display: flex;
  height: 100vh; /* 100vh makes the container fill the full screen height */
}
 h1 {
   color: white;
   text-align: center;
}
 .intro {
   background-color: #ff6700;
   color: #ff6700;
   box-shadow: 0 4px 8px rgba(0,0,0,0.2);
   border: 2px solid black;
   border-radius: 5px;
   padding: 15px;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(2, 1fr);
}
.intro img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  align-items: center;
  display: grid;
  /* Creates 3 equal-width columns */
  grid-template-columns: repeat(3, 1fr); 
  /* Adds spacing between grid items */
  gap: 20px; 
}
.idk {
  margin: 0 auto;
  font-family: "Vabedo";
  color: #ff6700;
}
img {
  background-position: center;
  font-family: Vabedo;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

  .image-container img {
    width: 130%;          /* Optional: Makes both images take up half the width */
    height: auto;
   object-fit: contain;/* Stops from being cutoff */
  }

  .image-container2 img {
    width: 30%;          /* Optional: Makes both images take up half the width */
    height: auto;
   object-fit: contain;/* Stops from being cutoff */
  }
  
.all-image-tops {
  display: flex;       /* Aligns the images side by side */
  gap: 10px;
  align-items: center; /* Aligns items on the Y-axis */
}
.not-found {
 /* 1. Set your image file path */

  /* 2. Prevent the image from repeating */
  background-repeat: no-repeat;

  /* 3. Scale the image to cover the entire window */
  background-size: cover;

  /* 4. Center the background image */
  background-position: center;

  /* 5. Keep the background fixed while scrolling */
  background-attachment: fixed;

   color: white;
   box-shadow: 0 4px 8px rgba(0,0,0,0.2);
   border: 2px solid black;
   border-radius: 5px;
   padding: 15px;
   display: grid;
     height: auto;
}
.hero-section {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('your-image.jpg');
  background-size: cover;
  background-position: center;
  color: white; /* Ensures your overlay text is highly readable */
}
.my-button {
  padding: 10px 20px;
  font-size: 16px;
  align-content: center;
  transition: transform 0.2s ease; /* Smooths the upscale animation */
}

.my-button:hover {
  transform: scale(1.1); /* Increases size by 10% */
}