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

body {
  background-color: #5C0A0A;
  color: #f5e6e0;
  font-family: Verdana;
}.menu-wrap {
  position: relative;
  margin-bottom: 1rem;
}

#menu-btn {
  font-size: 1.8rem;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
}

#menu-list {
  position: absolute;
  top: 2.5rem;
  left: 0;
  background-color: #161629;
  border: 2px solid #7f5af0;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  z-index: 10;
}

#menu-list.hidden {
  display: none;
}

#menu-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu-list li {
  margin: 0.5rem 0;
}

#menu-list a {
  color: #b8b8ff;
  text-decoration: none;
}

#menu-list a:hover {
  text-decoration: underline;
}
.photo-gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.gallery-row {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
}

.photo-gallery img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border: 10px solid #d4af37; /* gold frame */
  outline: 2px solid #8a6d1f; /* thin darker gold inner line */
  outline-offset: -14px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
  border-radius: 2px; /* museum frames are usually sharp-cornered, not rounded */
}
.memory-list {
  list-style: none;
  padding: 2rem 2.5rem;
  max-width: 650px;
  margin: 2rem auto;
  background-color: rgba(0, 0, 0, 0.15);
  border: 3px solid #d4af37;
  border-radius: 16px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.memory-list li {
  padding: 1.25rem 0;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
  font-size: 1.1rem;
  line-height: 1.6;
}

.memory-list li:last-child {
  border-bottom: none;
}

.memory-list li::before {
  content: "♥ ";
  color: #d4af37;
}
.circle-container {
  position: relative;
  width: 500px;
  height: 500px;
  margin: 3rem auto;
}

.center-meme {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 4px solid #d4af37;
  object-fit: cover;
  z-index: 5;
}

.orbit-photo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin: -50px;
  padding: 6px;
  background: linear-gradient(45deg, #d4af37, #f4e5a1);
  clip-path: url(#heart-clip);
  animation: orbit 18s linear infinite;
}

.orbit-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: url(#heart-clip);
  display: block;
  
}

@keyframes orbit {
  from { transform: rotate(0deg) translateX(200px); }
  to { transform: rotate(360deg) translateX(200px); }
}