.container {
    gap: 20px;
    display: flex;
    flex-direction: column
}

.box {
border-radius: 20px;
background-color: #d3bee8;
box-shadow: 10px 10px 9px #cdecd0;
border-right: solid #fdfffe;
border-bottom: solid #fdfffe;
padding:20px;
overflow:auto; 
text-align: center;}

.threecolumnsgrid {
display: flex;
flex-wrap: wrap;
gap: 20px;
height: 180vh;
}

.middlecolumn .box {
    min-height: 0; /* critical for allowing flex children to shrink */
    overflow: auto; /* optional: scroll content if it overflows */
}


.leftcolumn {
flex: 1;
gap: 20px;
display: flex;
flex-direction: column;
height: 100%;
}

h2 {
    text-decoration: wavy underline;
}

.pets img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.pets {
flex: none;
}


.journal {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex: none;
    overflow: hidden;
    flex: 1;
}

.journal img {
    width: 80%;
    height: auto;
    border-radius: 10px;
    padding: 20px;
}
.ribbons {
    height: auto;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.ribbons img {
    width: 50%;
    height: auto;
    border-radius: 10px;
}

.hatewords {
    flex: 1;
    text-align: left;
}

.hatewords h2 {
  text-align: center;
}


.hatewords li {
  list-style-image: url(img/eys.GIF);
}

.middlecolumn {
flex: 3;
gap: 20px;
display: flex;
flex-direction: column;
height: 100%;
}

.faves {
    flex: 1;
    
}

.masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 16px;
}

.faveimage {
  break-inside: avoid;
  background-color: #fff;
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.1);
  display: flex;            /* NEW */
  flex-direction: column;   /* stack image + text vertically */
  align-items: center;      /* center horizontally */
  text-align: center; 

}

.faveimage img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  width: 100%;
  height: 120px;     /* or whatever fits your design */
  object-fit: cover; /* crops image to fill box */
}



.faveimage h3 {
  margin-top: 8px;
  font-size: 1rem;
  text-align: center;
}

.me {
    flex: none;
    padding: 2%;
}

.me img {
    width: 100%;
    height: auto;
   
}
.nameandgraphics{
    display: flex;
    gap: 20px;
    flex: 1;
    min-height: 0;  

}

.nameandgraphics .box {
  flex: 2;
  
}

.randomgraphics img {
  width: 90%;
}

.graphics {
flex: 1;
gap: 20px;
display: flex;
flex-direction: column;

}

.inventions{
  display: flex;
  flex-direction: column;
  flex:2;
  text-align: left;
}

.inventions h2 {
  text-align: center;
}

.inventions strong {
  background-color:rgb(255, 206, 238)
}

.randomgraphics {
  flex: 1;
}

.name {
    flex: 3;
    min-height: 0;   /* crucial! allows shrinking */
    overflow: auto;  /* lets extra content scroll instead of growing the box */
}


.name img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.hobbies {
  max-height: 50vh;
  overflow: auto;
}

.hobbies li{
  text-align: left;
  list-style-image: url(img/icon.gif);
  
}

.hobbies strong {
  background-color: #cdecd0;
}

.allaboutandsylvanian {
    display: flex;
    gap: 20px;
}

.sylvanian {
  flex: 1;
}
 
.sylvanian img {
width: 100%;

}

.mems {
  flex:1;
  padding: 0%;
  display: flex;
}

.mems img {
  width: 100%;
  padding: 0%;
  margin: 0%;
}

.tattoos {
  flex: none;
  overflow: auto;
  height: 80vh;
 
}
.carpeimg {
  display: flex;
  flex-direction: column;
}

.carpeimg2 {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;

  
}

.dots {
  width: 60%;
}

.moon {
  width: 60%;
}

.tattew {
   display: flex;
   gap:20px;
   width: 100%;
}

.tattoosection {
display: flex;
flex-direction: column;
width: 30%;
justify-content: center;
}

.sleevevibies {
  display: flex;             /* row: images on left, text on right */
  gap: 20px;                  /* space between images and text */
  width: 100%;                /* full width of container */
   align-items: center;    /* align top */
}

.sleeveimgs {
  display: flex;              /* row layout for the two images */
  gap: 10px;                  /* space between the two images */
  flex: 1;     
          /* take proportional space on the left */
}

.sleeveimgs img {
  width: 50%;                 /* each image takes half the sleeveimgs container */
  height: auto;

}

.sleevevibies p {
  flex: 1;                    /* text takes the right side */
  margin: 0;
  text-align: left;
}

.memorylane img {
  width: 20%;
  height: 20%;
}


.bee {
  width: 100%;
}

@media (max-width: 768px) {

  /* Stack main columns + remove forced heights */
  .threecolumnsgrid {
    flex-direction: column;
    height: auto;
  }

  .sleevebit img {
  width: 100%;
}
.allaboutandsylvanian {
  flex-direction: column-reverse;
}

  .leftcolumn,
  .middlecolumn {
    width: 100%;
    height: auto;
    flex: none;
  }

  /* Stack name + graphics */
  .nameandgraphics {
    flex-direction: column;
    flex: none;
  }

  /* Constrain the name box */
  .name {
    flex: none;
    max-height: 70vh;
    overflow-y: auto;
  }

  .faves {
    flex: none;
    max-height: 70vh;
    overflow-y: auto;
  }

  /* Global safety + spacing */
  .box {
    padding: 12px;
  }

  img {
    max-width: 100%;
    height: auto;
 
}
  .middlecolumn {
    order: -1;  /* move to the top */
  }

  .leftcolumn {
    order: 0;   /* sidebar comes after */
  }
}