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

/* GENERAL PAGE STYLES */
body {
  background-color: #fbc8da;   /* light bubble-gum pink */
  text-align: center;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* HEADER */
h1 {
  color: #ff4da6;              /* hot pink name */
  margin-top: 60px;
}

/* PARAGRAPH STYLE */
p {
  color: #4a4a4a;
  font-size: 18px;
  line-height: 1.6;
}

/* CENTERED PHOTO */
.center-photo {
  display: block;
  margin: 40px auto;
  border-radius: 15px;
  width: 250px;
  border: 3px solid #ff4da6;
}

/* INTRO BOX WITH SCALLOPS */
.intro-box {
  background-color: #fff5fa;
  border: none;
  border-radius: 16px;
  width: 80%;
  max-width: 700px;
  margin: 40px auto;
  padding: 25px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  text-align: center;
  position: relative;
}
.intro-box::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 22px;
  pointer-events: none;
  background:
    radial-gradient(circle, #ff9ac7 7px, transparent 8px) top / 20px 20px repeat-x,
    radial-gradient(circle, #ff9ac7 7px, transparent 8px) bottom / 20px 20px repeat-x,
    radial-gradient(circle, #ff9ac7 7px, transparent 8px) left / 20px 20px repeat-y,
    radial-gradient(circle, #ff9ac7 7px, transparent 8px) right / 20px 20px repeat-y;
  z-index: -1;
}

/* Forest Green Divider */
.divider {
  width: 80%;
  height: 3px;
  background-color: #2e5c3a;
  border: none;
  border-radius: 2px;
  margin: 50px auto;
}


/* NOTEPAD SECTION */
/* CUTER PASTEL NOTEPAD STYLE */
/* CLASSIC NOTEPAD WITH RINGS */
.notepad {
  position: relative;
  width: 85%;
  max-width: 760px;
  margin: 50px auto;
  padding: 28px 20px 30px;
  background:
    repeating-linear-gradient(
      to bottom,
      #fff8cf 0 34px,
      #f2e7b2 34px 35px
    );
  border: 2px solid #e6d78d;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  text-align: center;
}

/* rings + binding strip */
.notepad::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -26px; height: 40px;
  background:
    radial-gradient(circle at 35px 20px, #3a3a3a 8px, transparent 9px) 0 0 / 90px 40px repeat-x,
    linear-gradient(#2f2f2f,#2f2f2f) center 30px / 100% 6px no-repeat;
  pointer-events: none;
}

.notepad h2 {
  margin: 4px 6px 16px;
  color: #ff4da6;
  font-family: 'Trebuchet MS', sans-serif;
}

/* table in notepad */
.np-table { width: 100%; border-collapse: collapse; margin: 0 auto; }
.np-table th {
  background-color: #ffe9f1;
  color: #444;
  padding: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 2px dashed #e7d68d;
}
.np-table td {
  padding: 12px;
  color: #333;
  border-bottom: 1px dashed #eedfa0;
}
.np-table tr:last-child td { border-bottom: none; }
.np-table td:first-child { font-weight: 700; color: #ff4da6; }

.section-title {
  color: #ff4da6;
  margin: 50px 0 14px;
  font-family: 'Trebuchet MS', sans-serif;
  text-align: center;
}

.player-card {
  width: 85%;
  max-width: 560px;
  margin: 0 auto 30px;
  background: #ffffff;
  border: 2px solid #ffd6e5;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  gap: 14px;
}

.play-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #ff4da6;
  color: #ff4da6;
  background: #fff5fa;
  font-size: 18px;
  cursor: default;
}

.track {
  text-align: left;
  flex: 1;
}

.track .title {
  font-weight: 700;
  color: #333;
}

.track .artist {
  color: #666;
  margin-bottom: 8px;
}

.bar {
  height: 6px;
  background: #ffe7f0;
  border-radius: 999px;
  overflow: hidden;
  margin: 6px 0 8px;
}

.bar .fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2e5c3a, #4f7c55);
  border-radius: 999px;
}

.listen-link {
  color: #2e5c3a;
  font-weight: 600;
  text-decoration: none;
}

.listen-link:hover {
  text-decoration: underline;
}
/* Song of the Week — mini player */
.section-title {
  color: #ff4da6;
  margin: 50px 0 14px;
  font-family: 'Trebuchet MS', sans-serif;
  text-align: center;
}

.mini-player {
  width: 85%;
  max-width: 560px;
  margin: 0 auto 30px;
  background: #ffffff;
  border: 2px solid #ffd6e5;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  gap: 14px;
}

.mini-play {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2px solid #ff4da6;
  color: #ff4da6; background: #fff5fa;
  font-size: 18px; line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
}

.mini-meta { text-align: left; }
.mini-title  { font-weight: 700; color: #333; }
.mini-artist { color: #666; margin-top: 2px; }

/* When iframe replaces the card, keep rounded corners */
.mini-player iframe {
  border: 0; border-radius: 12px; width: 100%; height: 166px;
}
/* Websites I Like — cute link cards */
.link-grid {
  width: 85%;
  max-width: 900px;
  margin: 10px auto 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
}

.link-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 2px solid #ffd6e5;       /* soft pink border */
  border-radius: 14px;
  padding: 12px 14px;
  text-decoration: none;
  color: #333;
  box-shadow: 0 4px 10px rgba(0,0,0,.06);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.link-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0,0,0,.08);
  border-color: #ffb3cf;            /* brighter pink on hover */
}

.link-card .emoji {
  font-size: 20px;
}

.link-card .label {
  font-weight: 700;
  letter-spacing: .2px;
}
/* Cosmic Video Section */
.star-video-section {
  position: relative;
  background: radial-gradient(circle at top, #1a1a40, #000);
  border-radius: 20px;
  width: 90%;
  max-width: 800px;
  margin: 60px auto;
  padding: 40px 0;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}

.video-container {
  position: relative;
  z-index: 2;
  text-align: center;
}

.video-container iframe {
  width: 80%;
  max-width: 640px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(255,255,255,0.2);
}

.video-caption {
  color: #fff;
  font-style: italic;
  margin-top: 12px;
}

/* Cosmic Video Section with real shooting star */
.star-video-section {
  position: relative;
  background: radial-gradient(circle at top, #1a1a40, #000);
  border-radius: 20px;
  width: 90%;
  max-width: 800px;
  margin: 60px auto;
  padding: 60px 0;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}

.video-container {
  position: relative;
  z-index: 2;
  text-align: center;
}

.video-container iframe {
  width: 80%;
  max-width: 640px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(255,255,255,0.2);
}

.video-caption {
  color: #fff;
  font-style: italic;
  margin-top: 12px;
}

/* subtle twinkling background */
.star-video-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.7) 1px, transparent 1px) repeat;
  background-size: 3px 3px;
  opacity: 0.5;
  animation: twinkle 3s infinite alternate;
}

@keyframes twinkle {
  from { opacity: 0.4; }
  to { opacity: 0.7; }
}

.shooting-star {
  width: 200px;
  animation: float 3s ease-in-out infinite;
  transition: transform 0.4s ease, filter 0.4s ease;
  cursor: pointer;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4));
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
/* subtle sparkle animation for the shooting star */
@keyframes sparkle {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5)); }
  50% { filter: drop-shadow(0 0 20px rgba(255, 255, 200, 0.9)); }
}

.shooting-star {
  width: 200px;
  animation: float 3s ease-in-out infinite, sparkle 2.5s ease-in-out infinite;
  transition: transform 0.4s ease, filter 0.4s ease;
  cursor: pointer;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4));
}
/* My Favorite Recipes Section */
.recipe-card {
  background-color: #fff8cc;           /* pastel yellow */
  border: 2px solid #a7d8ff;           /* pastel blue border */
  border-radius: 20px;
  width: 85%;
  max-width: 700px;
  margin: 40px auto;
  padding: 25px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.recipe-title {
  color: #4a90e2;                      /* soft blue title text */
  font-size: 1.6em;
  margin-bottom: 10px;
}

.recipe-desc {
  color: #4a2c2a;
  font-size: 1em;
  margin-bottom: 20px;
  line-height: 1.5em;
}

.recipe-video iframe {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
/* Arts & Crafts Scrapbook Section */
.scrapbook-board {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
  background: #fffdf8;
  padding: 40px;
  border-radius: 20px;
  border: 2px dashed #d1c5a6;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Sticky notes (pastel colors) */
.sticky-note {
  width: 220px;
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.15);
  text-align: center;
  transform: rotate(0deg);
  transition: transform 0.2s ease;
}

.sticky-note:hover {
  transform: scale(1.04) rotate(0deg);
}

.pink { background-color: #ffd6e5; }
.mint { background-color: #c8f7dc; }
.lavender { background-color: #e3d7ff; }
.yellow { background-color: #fff8cc; }

.tilt-left { transform: rotate(-3deg); }
.tilt-right { transform: rotate(3deg); }

.favorite {
  border: 2px solid #a7d8ff;
  box-shadow: 0 6px 14px rgba(0,0,0,0.2);
}

/* Images and text inside notes */
.craft-pic {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 8px;
}

.craft-title {
  color: #4a2c2a;
  font-weight: bold;
  font-family: "Comic Sans MS", "Segoe Script", "Bradley Hand", cursive;
}
/* Scrapbook board */
.scrapbook-board {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
  background: #fffdf8;
  padding: 36px;
  border-radius: 20px;
  border: 2px dashed #d1c5a6;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Sticky notes */
.sticky-note {
  position: relative;
  width: 230px;
  padding: 12px 12px 16px;
  border-radius: 14px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.14);
  text-align: center;
  transform: rotate(0deg);
  transition: transform .18s ease, box-shadow .18s ease;
}
.sticky-note:hover {
  transform: scale(1.035) rotate(0deg);
  box-shadow: 0 8px 16px rgba(0,0,0,0.16);
}

.pink     { background-color: #ffd6e5; }
.mint     { background-color: #c8f7dc; }
.lavender { background-color: #e6ddff; }
.yellow   { background-color: #fff8cc; }

.tilt-left  { transform: rotate(-3deg); }
.tilt-right { transform: rotate(3deg); }

.favorite {
  border: 2px solid #a7d8ff;     /* subtle highlight */
  box-shadow: 0 6px 14px rgba(0,0,0,0.2);
}

/* Photos & titles */
.craft-pic {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 10px;
  border: 2px solid rgba(255,255,255,0.6);
}
.craft-title {
  color: #4a2c2a;
  font-weight: 700;
  font-family: "Comic Sans MS", "Segoe Script", "Bradley Hand", cursive;
  margin: 6px 0 8px;
}

/* Washi tape corners */
.taped::before,
.taped::after {
  content: "";
  position: absolute;
  width: 90px;
  height: 20px;
  background:
    repeating-linear-gradient(45deg, #ffd6e7 0 10px, #cfe8ff 10px 20px);
  opacity: 0.9;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  border-radius: 4px;
}
.taped::before { top: -14px; left: 16px; transform: rotate(-6deg); }
.taped::after  { top: -14px; right: 16px; transform: rotate(7deg); }

/* Little doodles under the titles */
.doodles {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
}
.doodles .dot,
.doodles .star {
  display: inline-block;
  width: 14px; height: 14px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.1));
  border-radius: 50%;
}
.doodles .dot  { background: #ffb3cf; }
.doodles .star {
  width: 0; height: 0;             /* CSS star via borders */
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 12px solid #a7d8ff;
  position: relative;
}
.doodles .star::after {
  content: "";
  position: absolute; left: -7px; top: 3px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 12px solid #a7d8ff;
}

/* Dragonfly "play" sticker button */
.dragonfly-link {
  display: inline-block;
  margin-top: 8px;
  text-decoration: none;
}
.dragonfly-img {
  width: 80px;
  transition: transform .2s ease, filter .2s ease;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
  cursor: pointer;
}
.dragonfly-img:hover {
  transform: rotate(6deg) scale(1.06);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.25));
}
.recipe-card {
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin: 25px auto;
  width: 70%;
  text-align: center;
  font-family: 'Comic Sans MS', 'Bradley Hand', cursive;
  color: #4a2c2a;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.recipe-card:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}

/* 🍂 Fall style */
.recipe-card.fall {
  background: linear-gradient(180deg, #f9d9a7 0%, #f5b26b 100%);
  border: 3px solid #a25b1f;
}

.recipe-card.fall h3 {
  color: #7a3e1b;
}

/* 🍍 Summer style */
.recipe-card.summer {
  background: linear-gradient(180deg, #fff6b0 0%, #ffe78f 40%, #ffd966 100%);
  border: 3px solid #ffb347;
}

.recipe-card.summer h3 {
  color: #ff7e3d;
}

.recipe-card p {
  font-size: 1em;
  line-height: 1.5;
}