/* 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." */

style>
    .container {display: flex; flex-wrap: wrap;  gap:10px;justify-content: center;  
    }
    .container img{width:150px;height: auto;border-radius:8px;
    }
    /* 💖 GENERAL PAGE STYLE 💖 */
/* --- YOUR EXISTING BODY --- */
body {
  background: linear-gradient(135deg, #00ccff, #ff00cc, #ccff00);
  font-family: "Trebuchet MS", "Comic Sans MS", sans-serif;
  color: #ffffff;
  margin: 0;
  padding: 0;
  text-align: center;
  background-attachment: fixed;
  animation: bgShift 10s ease-in-out infinite;
  background-image: url("y2k/glitter-sparkle.gif");
  background-size: cover;
  background-blend-mode: screen;
}

/* Rainbow shimmer animation */
@keyframes bgShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* HEADER with Y2K vibes */
header {
  grid-area: header;
  background: linear-gradient(145deg, #ff00cc, #00ccff);
  border: 4px groove #c400ff;
  border-radius: 25px;
  box-shadow: 0 0 25px #ccff00, inset 0 0 10px #00ccff;
}

/* --- ADD THIS BELOW --- */

/* Container for pastel boxes */
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 40px;
}

/* General box style */
.box {
  border-radius: 12px;
  padding: 20px;
  width: 300px;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
  text-align: left;
  background: #ffffff; /* fallback if no pastel class is used */
  color: #3e2c27;
}

/* Hover effect */
.box:hover {
  transform: scale(1.02);
}

/* Title and text inside box */
.box h2 {
  font-size: 1.3em;
  margin-bottom: 10px;
}

.box p {
  line-height: 1.5;
  font-size: 0.95em;
}

/* Pastel color themes */
.box.pink {
  background: #ffeef3;
  border: 1px solid #f7cfd9;
  color: #7a5050;
}
.box.blue {
  background: #e8f4fa;
  border: 1px solid #b7dcef;
  color: #3a4c55;
}
.box.green {
  background: #edf8ef;
  border: 1px solid #c7e6c9;
  color: #3d5143;
}
.box.yellow {
  background: #fff9e6;
  border: 1px solid #f5e1a4;
  color: #665c36;
}
.box.lavender {
  background: #f3edff;
  border: 1px solid #d9ccf0;
  color: #4f4371;
}



@keyframes bgShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 🌟 PAGE GRID LAYOUT 🌟 */
.page-grid {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "nav"
    "aside"
    "footer";
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

/* 💅 HEADER */
header {
  grid-area: header;
  background-color: #ffe4fa;
  border: 4px double #ff69b4;
  border-radius: 20px;
  box-shadow: 0 0 15px rgba(255, 105, 180, 0.7);
  padding: 15px;
}

header h1 { 
  content: before" 💕"; 
  font-family: "Lucida Handwriting", cursive;
  font-size: 2.2rem;
  color: #00ccff;
  text-shadow: 2px 2px 8px #ffb6c1;
}

/* 🧁 MAIN CONTENT */
main {
  grid-area: main;
  background: #ff00cc;
  border: 4px ridge #ffb6c1;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 0 20px rgba(255, 182, 193, 0.8);
}

main h2 {
  font-size: 1.8rem;
  color: #c400ff;
  margin-bottom: 10px;
  text-shadow: 1px 1px 3px #ffaec9;
}

/* 🎀 FOLDER GRID (your cute boxes) */
.folder-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 15px;
}

.folder {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(180deg, #ffe1f0, #ffccf0);
  border: 3px groove #ff66b3;
  border-radius: 15px;
  box-shadow: 4px 4px 15px rgba(255, 105, 180, 0.6);
  padding: 10px;
  width: 150px;
  text-decoration: none;
  color: #a0006b;
  transition: all 0.3s ease;
 }
  

.folder:hover {
  transform: scale(1.1) rotate(-2deg);
  background: linear-gradient(180deg, #ffe6fa, #fff0f5);
  box-shadow: 0 0 25px #ff69b4;
}

.folder img {
  border: 2px solid #ffb6c1;
  border-radius: 10px;
  margin-bottom: 8px;
  width: 120px;
  height: auto;
}

/* 💜 NAVIGATION */
nav {
  grid-area: nav;
  background-color: #d8d8d8;
  border: 3px dashed #ff69b4;
  border-radius: 12px;
  padding: 15px;
  box-shadow: inset 0 0 10px rgba(255, 105, 180, 0.4);
}

/* 🎠 ASIDE (cute side graphics) */
aside {
  grid-area: aside;
  background-color: #ffeef9;
  border: 3px dotted #ff99cc;
  border-radius: 15px;
  box-shadow: 0 0 10px rgba(255, 192, 203, 0.7);
  padding: 10px;
}

.flex-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* 🌸 FOOTER */
footer {
  grid-area: footer;
  background-color: #ffb6c1;
  border: 3px solid #ff69b4;
  border-radius: 15px;
  color: white;
  padding: 15px;
  box-shadow: 0 0 20px rgba(255, 105, 180, 0.6);
}

footer h2 {
  color: white;
  margin-bottom: 10px;
}

/* 🌟 CUTE HOVER ANIMATIONS */
img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

img:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px #ff69b4;
}