html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #ffd3ac;
  color: #000000
}

/* this keeps your layout from flexing things weirdly */
body {
  position: relative;
}

/* left-side centered image */
.left-image {
  position: fixed;
  top: 50%;
  left: 250px;
  transform: translateY(-50%);
  z-index: 1000;
  pointer-events: none;
}

.left-image img {
  width: 250px;          /* change this for size */
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0,0,0,0.5);
}

.right-image {
  position: fixed;
  top: 50%;
  right: 250px;              /* same distance from the right edge */
  transform: translateY(-50%);
  z-index: 1000;
  pointer-events: none;
}

.right-image img {
  width: 250px;              /* match the left image size */
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
}

/* Keep your existing desktop styles */

/* Add a Media Query for mobile devices */
@media (max-width: 600px) {
    /* Change fixed positions to be centered or stacked on mobile */
    .left-image, .right-image {
        position: relative; /* Change from fixed to relative */
        top: auto;
        left: 50%; /* Center it */
        right: auto; 
        transform: translateX(-50%); /* Use translateX for centering */
        margin-bottom: 20px; /* Add space between stacked images */
    }
    .left-image,.right-image {
        display: block;
         margin: 0 auto 20px auto;
}


    /* Make the images fill more of the screen, but not all of it */
    .left-image img, .right-image img {
        width: 80%; /* Use a percentage for a fluid width */
        max-width: 300px; /* Set a max size so they don't get too big on tablets */
        height: auto;
    }
}

.folder-section {
  flex-grow: 1;
  display: flex;
  flex-direction: column;  /* keep the About Me stacked */
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
  color: black;
}

/* New: folders row */
.folders-row {
  display: flex;
  justify-content: center;  /* center the row horizontally */
  gap: 60px;                /* space between folder icons */
  margin-top: 20px;         /* space above the row */
}

.folder-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
footer {
  color: #888;
  font-size: 14px;
  margin-top: auto;   /* pushes the footer to the bottom */
  margin-bottom: 20px;
}