body {
  margin: 0;
  padding: 0;
  font-family: 'Press Start 2P', sans-serif;
  height: 100vh;
  background-color: #000; /* fallback if image fails */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Main container */
main {
  display: flex;            /* you can change this to grid or block */
  flex-direction: column;   /* or row if you want side-by-side */
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;       /* useful for absolute positioning children */
  margin-top: -3rem; /* move everything up, tweak this value */

}

/* Portfolio images side by side */
.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 equal columns */
  gap: 5rem;                      /* space between them */
  justify-items: center;          /* center images in their columns */
  margin-top: 5%;               /* optional spacing from top */
}

/* Buttons side by side */
.button-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  justify-items: center;
  margin-top: 4rem;
              /* space between portfolio and buttons */
}

/* Make sure images don’t overflow */
.portfolio-grid img {
width: 500px; 
  height: auto;
  display: block;
   border: 8px solid #FF0084;
   border-radius: 18px;
}

.button-grid img {
width: 200px; 
  height: auto;
  display: block;
}


/* Title image */
.adventure {
  width: 80%;
    display: block;    /* remove inline gap */
    margin-left: 7rem;
}

/* Images (shared styles) */
.normal_portfolio,
.fun_portfolio,
.normal_button,
.fun_button {
  max-width: 100%;   /* prevents overflow */
  height: auto;      /* maintains aspect ratio */
  display: block;    /* remove inline gap */
}

/* Links */
a {
  text-decoration: none; 
  color: inherit; 
}

/* Hover states (optional) */
.portfolio-grid img:hover {
  transform: scale(1.05);   /* little zoom */
  transition: transform 0.2s ease-in-out;
  filter: drop-shadow(0px 0px 10px white);
}