@media screen and (max-width:1050px) {
  .bento {
    margin-top: 25px !important;
    margin-left: 25px !important;
    gap: 5px !important;
  }

  
  .aboutMe {
    width: 100%; /* Make it more flexible */
    max-width: 400px; /* Control maximum size on smaller screens */
  }

  .aboutMe p {
    font-size: 26px !important;
  }

  .aboutMe img {
    position: relative;
    top: 100px;
    height: 305px !important;
    width: auto !important;
  }

  .blog p {
    font-size: 10px !important;
    position: absolute;
    bottom: 10px;
    right: 10px;
    margin: 0;
  }

  .blog img, .resume img, .contactMe img{
    display: none; 
  }
  .contactMe p{
    right: 100px;;
    bottom: 120px !important;
    font-weight:200;
  }
}
  
@media screen and (max-width: 760px) {
  .aboutMe p {
    font-size: 20px !important;
  }
  .aboutMe {
    width: 100%; /* Make it more flexible */
    max-width: 200px !important; /* Control maximum size on smaller screens */
  }
  .aboutMe img {
    position: relative;
    top: 200px;
    height: 205px !important;
    width: auto !important;
  }

  .resume img,.blog img{
    display: none; /* Properly hides both elements */
  }

  .contactMe p {
    right: 100px;
    bottom: 130px !important;
    font-size: 10px;
  }
}


body {
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: hidden;
  background-image: linear-gradient(30deg,#000,#000e2c);
  background-blend-mode:color-burn;
  font-family:'Courier New', Courier, monospace
}

.bento {
  margin-top: 65px;
  margin-left: 65px;
  max-width: 90%;
  min-height: 500px;
  max-height: 600px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.layer1{
  flex:4;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  height: 400px;
  gap:10px;
  justify-content: space-between;
  align-items: stretch;
}

.aboutMe,
.portfolio,
.resume,.blog,
.contactMe{
  background-color: #122436;
  color: white;
  border:#0a1d31 solid 0.1px;
  background: rgba(45, 64, 76, 0.139); 
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 10px;
}

.aboutMe,
.portfolio,
.resumeBlog,
.contactMe {
  height: 100%; /* Ensure they stretch equally */
  display: flex; /* Enable proper alignment for child content */
  flex-direction: column; /* Default to column layout */
}

.aboutMe{
  max-width: 500px;
  width: 360px;
  height: 100%;
  flex:2;
  position: relative;
  overflow: hidden;
}
.aboutMe:hover{
  background-image: linear-gradient(#1325386b,#09121c6b,#04080c6b);
  /* background-color: #1224366b; */
  transition: transform 0.3s ease-in-out, color 0.3s ease-in-out; 
}
.aboutMe p{
  position: relative;
  top:10px;
  left:20px; 
  font-size: 45px;
  margin: 0%;
}
.aboutMe img {
  position: absolute; /* Avoid fixed positioning */
  bottom: 0; /* Anchor to the bottom of the container */
  left: 0;
  height: auto;
  width: 100%; /* Ensure image spans container width */
}

.portfolio{
  max-width: 300px;
  height: 100%;
  flex:1;
  box-sizing: border-box;
  align-items:center;
}
.portfolio:hover{
  background-image: linear-gradient(#1325386b,#09121c6b,#04080c6b);
  transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
}
.portfolio p{
    font-size: 15px;
    margin:  10px;
}

.portfolio img{
  position: absolute; 
  height: 90%;
  width: auto; /* Ensure image spans container width */
  bottom: 10px;
  filter: drop-shadow(0 -10px 10px rgba(1, 187, 255, 0.15))  /* top glow */
          drop-shadow(10px 0 10px rgba(0, 234, 255, 0.15))   /* right glow */
          drop-shadow(-10px 0 10px rgba(77, 1, 255, 0.15)) /* left glow */
          drop-shadow(0 10px 10px rgba(0, 234, 255, 0.15));
}
.portfolio:hover img{
  height: 92%;
  transition: transform 10s ease-in-out, color 1s ease-in-out;
  filter: drop-shadow(0 -15px 15px rgba(96, 213, 255, 0.15))  /* top glow */
          drop-shadow(15px 0 15px rgba(94, 242, 255, 0.15))   /* right glow */
          drop-shadow(-15px 0 15px rgba(143, 95, 255, 0.15)) /* left glow */
          drop-shadow(0 15px 15px rgba(95, 242, 255, 0.15));
}

.resumeBlog{
  max-width: 500px;
  height: 100%;
  flex:2;
  display: flex;
  flex-direction:column;
  gap:10px;
}
.resume{
  height: 260px;
  flex:2;
  overflow: hidden;
  position: relative;  
}
.resume:hover{
  background-image: linear-gradient(#1325386b,#09121c6b,#04080c6b);
  transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
}
.resume p{
  font-size: 15px;
  margin:  10px;
}
.resume img {
  height: 200px;
  width: auto;
  position: absolute;
  right: 40px;
  bottom: 0;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* stronger visible shadow */
  border-radius: 8px 8px 0px 0px; 
  filter: blur(0.4px)
          drop-shadow(0 -5px 5px rgba(1, 187, 255, 0.3))  /* top glow */
          drop-shadow(5px 0 5px rgba(0, 234, 255, 0.3))   /* right glow */
          drop-shadow(-5px 0 5px rgba(77, 1, 255, 0.3)); /* left glow */   
  transition: color 5s ease;  
}
.resume:hover img{
  filter: blur(0.4px)
          drop-shadow(5px 0 5px rgba(1, 187, 255, 0.3))  /* top glow */
          drop-shadow(-5px 0 5px rgba(0, 234, 255, 0.3))   /* right glow */
          drop-shadow(0 -5px 5px rgba(77, 1, 255, 0.3)); /* left glow */
}
.blog{
  height: 130px;
  flex:1;
  position: relative;
  padding: 10px;
  box-sizing: border-box;
}
.blog:hover{
  background-image: linear-gradient(#1325386b,#09121c6b,#04080c6b);
  transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
}
.blog p{
  font-size: 15px;
  position: absolute;
  bottom: 10px;
  right: 10px;
  margin: 0%;
}
.blog img{
  height: 200px; 
  width: inherit; 
  position: fixed; 
  bottom:0px;
  filter: drop-shadow(0 -5px 5px rgba(0, 217, 255, 0.1))
          drop-shadow(5px 0 5px rgba(19, 0, 164, 0.1));
}
.contactMe{
  max-width: 1200px;
  min-height: 100px;
  flex:1;
}
.contactMe:hover{
  background-image: linear-gradient(#1325386b,#09121c6b,#04080c6b);
  transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
}
.contactMe p{
  
  font-size: 15px;
  position: absolute;
  text-align: center;
  /* left: 100px; */
  padding: 10px;
  margin: 0%;
}
.contactMe img {
  opacity: 0;            /* invisible but still takes up space */
  pointer-events: none;  /* can't interact until hovered */
  transition: opacity 0.3s ease;
  height: 50px;
  width: auto; 
  position: fixed;
  right: -56px;
  bottom: 100px;
  filter: drop-shadow(0 -5px 5px rgba(1, 187, 255, 0.15))   /* top glow */
          drop-shadow(5px 0 5px rgba(0, 234, 255, 0.15))    /* right glow */
          drop-shadow(-5px 0 5px rgba(128, 74, 255, 0.15)); /* left glow */
}

.contactMe:hover img {   /* when parent is hovered, show image */
  opacity: 1;
  pointer-events: auto;
  animation-name: notification;
  animation-duration: 1s;
  animation-delay: 0s;
  transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
}
@keyframes notification {
  100%   { right: -56px;bottom: 100px;}
  0% { right: -56px;bottom: -100px;}
}
a{
  color: inherit;
  text-decoration: none;
}