/* --- 1. THE GHIBLI MOVING STARS BACKGROUND --- */
body {
  background-color: #2c2c54;
  margin: 0;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  color: #4a4a6a;
  position: relative;
  min-height: 100vh;
}

@keyframes starDrift {
  from { background-position: 0 0; }
  to { background-position: 500px 500px; }
}

.moving-stars-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  background-image: url('https://64.media.tumblr.com/b383a6ab1abff32e82c906c874d33f8e/e44137b9ee0cff26-f9/s500x750/b3c3c538e98c0835a328e50e861e57bc68daa1ed.gif');
  background-size: 400px;
  opacity: 0.8;
  animation: starDrift 100s linear infinite;
}

/* --- 2. TOP HEADER WITH GIF BACKGROUND --- */
.top-header {
  background-image: url('https://web.archive.org/web/20091027002244/http://cf.geocities.com/canalfantaisie/beberose.gif');
  background-size: cover;
  background-position: center;
  border: 3px solid #68179C;
  border-radius: 20px;
  padding: 40px 15px;
  text-align: center;
  margin-bottom: 30px;
  box-shadow: 0 5px 15px rgba(126, 140, 224, 0.2);
}

.top-header h1 {
  background: rgba(255, 255, 255, 0.75);
  color: #5a67a6;
  display: inline-block;
  padding: 15px 25px;
  border-radius: 15px;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  font-size: 1.8em;
  margin: 0;
}

/* --- 3. GRID LAYOUT --- */
.layout-container {
  display: grid;
  grid-template-columns: 1fr 280px; 
  gap: 25px;
  max-width: 1200px;
  margin: 0 auto;
}

/* --- 4. RIGHT SIDEBAR --- */
.sidebar {
  position: sticky;
  top: 20px;
  height: fit-content;
}

@keyframes sidebarFloat {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
  100% { transform: translateY(0px); }
}

.sidebar-pixel-box {
  background-color: #ffd4eb;
  padding: 15px;
  border: 4px solid #c43182;
  box-shadow: 6px 6px 0px #f5bcdb; 
  border-radius: 4px;
  animation: sidebarFloat 5s ease-in-out infinite;
}

.side-header {
  font-weight: bold;
  text-align: center;
  padding: 8px 0;
  color: #c43182;
  border-bottom: 2px dashed #c43182;
  margin: 10px 0;
  letter-spacing: 1px;
}

.side-btn {
  display: block;
  text-decoration: none;
  background: WHITE;
  color: #c43182;
  padding: 10px;
  margin: 8px 0;
  border: 2px solid #ffb6c1;
  font-size: 0.85em;
  font-weight: bold;
  text-align: center;
  transition: 0.2s;
}

.side-btn:hover {
  background-color: #f3e7f7;
  padding-left: 20px;
  border-color: #c43182;
  cursor: pointer;
}

/* --- 5. MAIN CONTENT BOXES --- */
.box {
  background: rgba(255, 255, 255, 0.95);
  border: 3px solid #68179C;
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 30px;
  position: relative;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.profile-layout {
  display: flex;
  align-items: center;
  gap: 25px;
}

.profile-img {
  width: 140px;
  height: 140px;
  border-radius: 15px;
  border: 4px dashed #dcedc8;
  object-fit: cover;
}

/* --- 6. VIDEO & MUSIC --- */
.video-container {
    background: #fff;
    padding: 15px 15px 40px 15px;
    border: 1px solid #ddd;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.1);
    transform: rotate(-0.5deg);
    margin: 20px auto;
}

.music-box {
  margin-top: 20px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  padding: 10px;
  border: 1px solid #c43182;
}

.music-box p {
  font-size: 10px;
  margin-bottom: 5px;
  color: #c43182;
  text-align: center;
}

/* --- 7. SOCIALS --- */
.social-links-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 10px 0;
}

.social-card {
  background: #fff;
  border: 1px solid #ddd;
  padding: 10px;
  text-decoration: none;
  color: #5a67a6;
  text-align: center;
  width: 80px;
  box-shadow: 3px 3px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.social-card:hover {
  transform: scale(1.1) rotate(2deg);
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
  .layout-container { grid-template-columns: 1fr; }
  .sidebar { position: static; margin-top: 20px; }
}

/* --- MEMORY SIDEBAR SECTION --- */
.memory-sidebar-box {
  margin-top: 25px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  text-align: center;
}

.memory-title {
  font-family: 'Georgia', serif;
  font-size: 0.9em;
  color: #c43182;
  font-weight: bold;
  margin-bottom: 15px;
}

.polaroid-frame {
  background: white;
  padding: 8px 8px 20px 8px;
  box-shadow: 3px 3px 10px rgba(0,0,0,0.1);
  transform: rotate(-3deg); /* Tilts the photo slightly */
  transition: transform 0.3s ease;
  border: 1px solid #eee;
  margin: 0 auto 15px auto;
  width: 85%;
}

.polaroid-frame:hover {
  transform: rotate(0deg) scale(1.05); /* Straightens when you hover over it */
}

.memory-photo {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid #ddd;
}

.polaroid-caption {
  font-family: 'Brush Script MT', cursive; /* Makes it look handwritten */
  font-size: 1.1em;
  color: #555;
  margin-top: 10px;
}

.memory-text {
  font-size: 0.75em;
  font-style: italic;
  color: #666;
  line-height: 1.4;
}