/* ================================
   RETRO GEOCITIES THEME CSS (FIXED)
   With beginner-friendly notes
   ================================ */

/* === GLOBAL STYLES ===
   These affect the whole page.
   - "body" is the root container for all content.
   - font-family sets Comic Sans for that 90s look.
   - background combines a tiled "stardust" pattern with a gradient.
   - margin/padding 0 removes browser default spacing.
   - color sets default text color.
*/
body {
  font-family: "Comic Sans MS", cursive, sans-serif;
  background: url("https://www.transparenttextures.com/patterns/stardust.png"),
              linear-gradient(45deg, #ff00ff, #00ffff);
  margin: 0;
  padding: 0;
  color: #000;
}

/* === HEADER ===
   - Sits at the top of the page.
   - Uses rainbow gradient background with dashed border.
   - h1 has a text shadow for retro "pop".
*/
header {
  background: linear-gradient(90deg, #ff0, #f0f, #0ff);
  padding: 1rem;
  text-align: center;
  border-bottom: 5px dashed #000;
}

header h1 {
  font-size: 2.5rem;
  text-shadow: 2px 2px #fff;
}

/* === LAYOUT CONTAINER ===
   - Uses flexbox for a two-column layout (sidebar + content).
   - max-width keeps layout from stretching too wide.
   - margin auto centers content.
   - gap adds spacing between sidebar and content.
*/
.main-container {
  display: flex;
  max-width: 1200px;
  margin: 1rem auto;
  gap: 1rem;
  padding: 0 1rem;
}

/* === SIDEBAR ===
   - Fixed width column on the left.
   - "sticky" keeps it visible while scrolling.
   - Contains profile picture and nav links.
*/
aside {
  width: 250px;
  background: #ffef99;
  padding: 1rem;
  border: 3px groove #000;
  text-align: center;
  position: sticky;
  top: 1rem;
}

/* Sidebar profile picture:
   - Full width of sidebar.
   - Circle shape with border + drop shadow.
*/
aside img {
  width: 100%;
  border-radius: 50%;
  border: 4px solid #000;
  margin-bottom: 1rem;
  box-shadow: 0 0 10px #000;
}

/* Sidebar navigation list:
   - Removes default bullets/padding.
   - Adds retro-style wavy underline to links.
*/
aside ul {
  list-style: none;
  padding: 0;
}

aside ul li {
  margin: 0.5rem 0;
}

aside ul li a {
  color: #00f;
  font-weight: bold;
  text-decoration: underline wavy;
}

/* === MAIN CONTENT AREA ===
   - "flex: 1" makes it expand to fill space.
*/
.content {
  flex: 1;
}

/* === BLOG BOX ===
   - Bordered box with dotted outline.
   - Fixed height (250px) and scrollable if overflow.
   - Flexbox keeps header fixed at top, content scrolls below.
*/
.blog-post {
  border: 4px dotted #000;
  background: #fff;
  margin-bottom: 1rem;
  height: 250px;         /* fixed height */
  overflow-y: auto;      /* scrollbar for content */
  display: flex;
  flex-direction: column;
}

/* Blog post title bar:
   - Always visible even if box scrolls.
   - Retro pink background and bottom border.
*/
.blog-post h2 {
  background: #ff99cc;
  padding: 0.5rem;
  margin: 0;
  border-bottom: 3px solid #000;
  text-align: center;
  flex-shrink: 0;        /* keeps title bar visible */
}

/* Blog post text content */
.blog-content {
  padding: 1rem;
  font-size: 0.9rem;
  flex-grow: 1;          /* fills remaining space */
}

/* === GALLERY BOX ===
   - Same idea as blog box: bordered, fixed height, scrollable.
   - Contains grid of images that resize evenly.
*/
.gallery-box {
  border: 4px dotted #000;
  background: #fff;
  height: 250px;         /* fixed height */
  overflow-y: auto;      /* scrollbar if needed */
  padding: 1rem;
}

/* Photo gallery grid:
   - auto-fit makes it responsive.
   - minmax ensures each cell has a min size but can expand.
   - gap adds space between images.
*/
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

/* Gallery images:
   - Always uniform size (object-fit: cover crops edges if needed).
   - Thick retro border + padding.
*/
.photo-gallery img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border: 3px solid #000;
  padding: 3px;
  box-sizing: border-box;
  background: #fff;
}

/* === FOOTER ===
   - Rainbow gradient background + dashed border.
   - Small "made by" badge floats right (or stacks on mobile).
*/
footer {
  background: linear-gradient(90deg, #ff0, #f0f, #0ff);
  text-align: center;
  padding: 0.5rem;
  border-top: 5px dashed #000;
  font-size: 0.9rem;
  position: relative;
}

/* Made-by badge styles */
footer .made-by {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

footer .made-by img {
  width: 32px;
  height: 32px;
  border: 2px solid #000;
  border-radius: 50%;
}

/* === MOBILE RESPONSIVENESS ===
   - On small screens (<768px), the layout changes.
   - Sidebar stacks above content.
   - Footer badge moves below text.
*/
@media (max-width: 768px) {
  .main-container {
    flex-direction: column;
  }

  aside {
    position: static;
    width: 100%;
    margin-bottom: 1rem;
  }

  .content {
    width: 100%;
  }

  footer .made-by {
    position: static;
    display: block;
    margin: 0.5rem auto 0;
    transform: none;
  }
}