/* --- Cursor --- */
* {
  cursor: url('PaperAirplaneCursor.png') 6 6, auto !important;
}
body.crumpled * {
  cursor: url('CrumpledPaperCursor.png') 6 6, auto !important;
}

/* --- Side Navigation --- */
.side-nav {
  width: 200px;
  background-color: #f8f8f8;
  padding: 2rem 1rem;
  box-shadow: 2px 0 5px rgba(0,0,0,0.1);
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
}
.side-nav ul { list-style: none; padding: 0; margin: 0; }
.side-nav ul li { margin-bottom: 1.5rem; }
.side-nav a { text-decoration: none; color: #000; font-weight: bold; transition: color 0.2s; }
.side-nav a:hover { color: #555; }
.side-nav .social-links { margin-top: 0.5rem; margin-left: 1rem; list-style: none; padding-left: 0; }
.side-nav .social-links li { margin-bottom: 0.5rem; }

/* --- Main Content (GIF) --- */
main { margin-left: 200px; display: flex; justify-content: center; align-items: center; }
.interactive-section { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; padding: 1rem; }
.clickable-gif { max-width: 90%; max-height: 80vh; width: auto; height: auto; cursor: pointer; transition: transform 0.3s; }
.clickable-gif:hover { transform: scale(1.05); }

/* --- Grocery Bag --- */
.grocery-bag-section { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: white; }
.grocery-bag { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: black; font-family: "Courier New", monospace; cursor: pointer; transition: transform 0.3s ease; }
.grocery-bag img { width: 150px; margin-bottom: 1rem; transition: transform 0.3s ease; }
.grocery-bag:hover img { transform: scale(1.1); }
.grocery-bag span { font-size: 1.5rem; text-align: center; }

/* --- Food Gallery --- */
.food-gallery { position: relative; width: 100%; height: 600px; margin: 2rem 0; }
.food-item { position: absolute; cursor: pointer; transition: transform 0.2s ease; }
.food-item:nth-child(1) { top: 10%; left: 5%; }
.food-item:nth-child(2) { top: 30%; left: 50%; }
.food-item:nth-child(3) { top: 60%; left: 20%; }
.food-item img { width: 100px; height: auto; transition: transform 0.3s ease; }
.food-item img:hover { transform: scale(1.1); }

/* --- Shake Animation --- */
@keyframes shake { 0% { transform: translate(0,0) rotate(0deg); } 10% { transform: translate(-5px,2px) rotate(-5deg); } 20% { transform: translate(5px,-2px) rotate(5deg); } 30% { transform: translate(-3px,1px) rotate(-3deg); } 40% { transform: translate(3px,-1px) rotate(3deg); } 50% { transform: translate(0,0) rotate(0deg); } 100% { transform: translate(0,0) rotate(0deg); } }
.grocery-bag.shake img, .food-item.shake img { animation: shake 0.5s; }

/* --- Responsive --- */
@media screen and (max-width: 768px) {
  .side-nav { position: relative; width: 100%; height: auto; box-shadow: none; display: flex; justify-content: center; padding: 1rem 0; }
  .side-nav ul { display: flex; gap: 1.5rem; }
  main { margin-left: 0; }
  .interactive-section { height: auto; padding: 2rem 1rem; }
  .grocery-bag img { width: 120px; }
  .grocery-bag span { font-size: 1.2rem; }
  .food-gallery { height: 700px; }
  .food-item img { width: 80px; }
}