:root {
    --bg-pink: #ffd6e0;
    --soft-white: rgba(255, 255, 255, 0.88);
    --border-pink: #ffb6c1;
    --text-main: #6b4c5a;
    --text-highlight: #d1497b;
    --link-color: #ff8fab;
}

.container {
  display: grid; 
  grid-gap: 20px;
  grid-template:
    "header header"
    "sidebar main"
    "footer footer"/;
  grid-template-columns: 200px 1fr;
  background-color: pink;
  padding: 20px;
  box-sizing: border-box;
}

header, aside, main, footer {
  background-color: lightpink;
  padding: 20px;
  box-sizing: border-box;
  border: 3px dotted black;
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  box-shadow: 6px 6px 0px pink; 
  font-family: 'VT323', 'VT323', monospace;
  color: white;
  transition: transform 0.2s ease;
}

header {
  grid-area: "header";
  transform: roate(-1deg);
  background-color: pink;
  font-family: 'VT323', 'VT323', monospace;
  border: 3px dotted black;
}
aside { 
  grid-area: "sidebar";
  transform: roate(2deg);
  font-family: 'VT323', 'VT323', monospace;
}
main { 
  grid-area: "main";
  transform: rotate(-0.5deg);
  font-family: 'VT323', 'VT323', monospace;
  }
footer { 
  grid-area: "footer";
  transform: rotate(1.5deg);
  }
  
  header:active, aside:active, main:active, footer:active {
    transform: scale(0.98) rotate(0deg);
    box-shadow: 2px 2px 0px pink;
    font-family: 'VT323', 'VT323', monospace;
  }

body {
    background: pink url("flowerbuns.jpg") center/cover fixed;
    font-family: 'VT323', 'VT323', monospace;
    color: hotpink;
    margin: 0; padding: 40px 20px 40px 260px;
    display: flex; justify-content: center; min-height: 100vh; box-sizing: border-box;
}
nav {
    position: fixed; top: 0; left: 0; width: 220px; height: 100vh;
    background-color: rgba(255, 255, 255, 0.92);
    border-right: 4px solid pink;
    padding: 40px 20px; box-sizing: border-box; z-index: 10;
}
.nav-menu { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 25px; }
.nav-menu a { text-decoration: none; color: pink; font-weight: 700; }
.diary-wrapper {
    background-color: white; width: 100%; max-width: 800px;
    border-radius: 20px; border: 3px dashed pink; padding: 30px;
    display: flex; gap: 30px; box-sizing: border-box;
}
.sidebar { width: 200px; flex-shrink: 0; }
.polaroid { background: white; padding: 10px; transform: rotate(-3deg); text-align: center; }
.profile-pic { width: 100%; height: auto; }
.mp3-player { background: white; border: 2px solid pink; padding: 10px; text-align: center; }
.btn-cute { background-color: pink; color: white; border: none; cursor: pointer; }
.content { flex-grow: 1; }
@media (max-width: 850px) {
    body { padding: 20px; }
    nav { position: relative; width: 100%; height: auto; border-right: none; }
    .diary-wrapper { flex-direction: column; }
}

 .bottom-right-gif {
  position: fixed;     /* Keeps the GIF pinned in place when scrolling */
  bottom: 20px;        /* Distance from the bottom edge */
  right: 20px;         /* Distance from the right edge */
  width: 150px;        /* Adjust width as needed */
  height: auto;        /* Maintains aspect ratio */
  z-index: 9999;       /* Keeps the GIF on top of all other elements */
  pointer-events: none; /* Optional: allows users to click items behind the GIF */
        }
        
        /* Perfect for a retro game or arcade box layout */
.pixel-text {
    font-family: 'VT323', monospace;
    font-size: 24px; /* Pixel fonts look best at larger sizes */
    letter-spacing: 1px;
}

.magazine-pic {
  /* Floats the image to the left so text wraps on the right */
  float: left; 
  
  /* Adds space between the picture and your text */
  margin-right: 20px; 
  margin-bottom: 10px; 
  
  /* Controls the size of the image */
  width: 500px; 
  height: auto; 
}

/* Keeps the container from collapsing */
.magazine-container::after {
  content: "";
  display: table;
  clear: both;
}

/* The container controls the boundary */
.cover-container {
  position: relative;
  width: 100%;
  max-width: 500px; /* Adjust this to match your desired image size */
  margin: 0 auto;
}

/* Ensure the image fills the container smoothly */
.cover-bg {
  width: 100%;
  height: auto;
  display: block;
}

/* This positions the text layer precisely over the image */
.cover-text {
  position: absolute;
  
  /* Positions the text starting from the top-left corner of the image */
  top: 0;
  left: 0;
  
  /* Forces the text box to stretch over the entire image area */
  width: 100%;
  height: 100%;
  
  /* Padding keeps the text from hitting the very edge of the picture */
  padding: 30px; 
  box-sizing: border-box;
  
  /* Optional styling to make your text pop */
  color: white; 
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); 
}

.left-sidebar-box {
  font-family: 'VT323', monospace;
  color: white; 
  background-color: pink;
  border: 2px dotted black;
  padding: 15px;
  border-radius: 8px;
  height: fit-content;              /* Box height expands naturally with your text */
  min-height: 500px;                /* Forces it to be a long rectangle even with less text */
}

.main-layout {
  display: grid;
  grid-template-columns: 250px 1fr; /* Left box is 250px wide; right fills the rest */
  gap: 20px;                         /* Spacing between the left box and right content */
  max-width: 1200px;
  margin: 0 auto;                    /* Centers the whole layout on the screen */
  padding: 20px;
}

/* Removes bullets and indents from the list */
.sidebar-blinkies {
    list-style-type: none; /* Removes the default dots/bullets */
    padding: 0;            /* Removes default left padding */
    margin: 0;             /* Removes default outer margins */
    display: flex;         /* Enables easy alignment */
    flex-direction: column;/* Stacks the items vertically */
    align-items: center;   /* Centers the blinkies inside the sidebar box */
    gap: 8px;              /* Adds a clean 8px space between each blinkie */
}

/* Optional: Ensures the blinkie images don't break your sidebar layout */
.sidebar-blinkies img {
    width: 88px;           /* Standard classic blinkie width */
    height: auto;          /* Standard classic blinkie height */
    display: block;        /* Prevents weird extra spacing underneath images */
    object-fit: contain;
}