/* 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 {
  background-color: #161616;
  color: #fff7f0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.myImg {
 border: 5px solid #a8c5ff; /* thicker + a slightly deeper, richer blue */
  border-radius: 14px; /* a little rounder to match thickness */
  box-shadow: 0 0 12px rgba(215, 217, 255, 0.5); /* glow effect to make it pop */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.myImg:hover {
  transform: scale(1.05);
    box-shadow: 0 0 20px rgba(215, 217, 255, 0.8);

}

.myGallery {
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* space between images */
  justify-content: center; /* center the gallery */
  padding: 20px;
   z-index: 10;
}

.myGallery img {
  border: 3px solid #bfd7ff; /* thicker + a slightly deeper, richer blue */
  border-radius: 12px; /* a little rounder to match thickness */
  box-shadow: 0 0 8px rgba(215, 217, 255, 0.5); /* glow effect to make it pop */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  max-width: 300px; /* optional: limit the image size */
  height: auto;
  cursor: pointer; /* make it clear you can interact */
   z-index: 10;
}



.myGallery img:hover {
  transform: scale(3.00);
     box-shadow: 0 0 10px rgba(215, 217, 255, 0.8);

}


.myPost {
  background-color: #d0e8f9; /* light sky blue inside */
  border: 3px solid #d9c8f9; /* very light sky-purple border */
  border-radius: 12px; /* semi-rounded corners */
  padding: 20px;
  margin: 20px auto;
  max-width: 90%;
  color: #333; /* dark grey text */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* faded soft shadow */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  
   /* New important stuff */
  display: inline-block;
  transition: transform 0.3s ease, box-shadow 0.3s ease, max-height 0.5s ease;
  will-change: transform, max-height;
  max-height: 100px;
   overflow: hidden; 
}



.myPost:hover {
  transform: scale(1.03); /* a bit bigger so you really see it */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* deeper pop shadow */
    max-height: 1000px;
}

@media (min-width: 1024px) { /* Adjust breakpoint as needed */
  .myPost {
    max-width: 60%; /* For larger screens */
  }
}
@media (max-width: 700px) { /* Adjust breakpoint as needed */
  .myImg {
    max-width: 90%; /* For larger screens */
  }
}

.myPostAero {
	
	  background: rgba(30, 30, 30, 0.7); /* dark translucent */
color: #ffffff;
  display:inline-block;

font-family: 'Orbitron', sans-serif;
  
  -webkit-backdrop-filter: blur(8px);
  border-radius: 12px;
   padding: 20px;
  margin: 20px auto;
 
  box-shadow: inset 0 0 1px rgba(255,255,255,0.2), 0 4px 12px rgba(0,0,0,0.6);
  position: relative;
  overflow: hidden; /* for gloss pseudo-element */
  line-height: 1.6;
  align-items: left;
  justify-content: left;
  text-align: left;
  
    transition: transform 0.3s ease, box-shadow 0.3s ease, max-height 0.5s ease;
  will-change: transform, max-height;
  max-height: 100px;
}

.myPostAero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 35%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0));
  pointer-events: none; /* don't block clicks */
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  
}

.myPostAero:hover {
  transform: scale(1.03); /* a bit bigger so you really see it */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* deeper pop shadow */
    max-height: 5200px;
}

@media (min-width: 1024px) { /* Adjust breakpoint as needed */
  .myPostAero {
    max-width: 60%; /* For larger screens */
  }
}

.myH {
  color: #fff7f0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* subtle shadow */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.myH:hover {
  transform: scale(1.05);
}

.container {
  display: flex;
   align-items: flex-start;
  column-gap: 40px;
margin-top:8%;
  padding: 10px;
  flex-wrap: wrap;
    }
	
.container > .myContent {
    flex: 1 1 400px; /* grow, shrink, basis */
    min-width: 300px; /* force stacking when too small */
	

  }	
.container > .myImg {
    margin-right: 90px;
	 margin-bottom: 90px;

  }	
.myContent {
	 font-size: 20px;
}

.myTbar {
  background: rgba(30, 30, 30, 0.7); /* dark translucent */
color: #ffffff;
font-size: 36px;
font-family: 'Orbitron', sans-serif;
  
  -webkit-backdrop-filter: blur(8px);
  padding: 12px 20px;
  border-radius: 12px;
  
 
   box-shadow: inset 0 0 1px rgba(255,255,255,0.2), 0 4px 12px rgba(0,0,0,0.6);
  position: relative;
  overflow: hidden; /* for gloss pseudo-element */

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* This creates the shiny "gloss" */
.myTbar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 35%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0));
  pointer-events: none; /* don't block clicks */
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  
}

a {
  color: #87CEEB; /* SkyBlue color */
  text-decoration: none; /* optional: remove underline */
}

a:hover {
  color: #00BFFF; /* DeepSkyBlue for hover */
  text-decoration: underline; /* optional: add underline on hover */
}

.highlighted {
  color: #87CEEB; /* SkyBlue */
  text-shadow: 0 0 8px rgba(135, 206, 235, 0.6); /* faint skyblue glow */
  font-weight: 200; /* slight boldness to pop */
  display: inline-block;
  
}