@import url('https://fonts.googleapis.com/css2?family=Cabin+Sketch:wght@400;700&family=Rock+Salt&family=Special+Elite&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&family=Rubik+Dirt&display=swap');

.feather {
  position: absolute;
  width: 80px;
  opacity: 0.85;
  z-index: 10;
  transition: transform 0.3s ease;
}
.top-left {
  top: 0;
  left: 0;
  transform: rotate(-15deg);
}
.bottom-right {
  bottom: 0;
  right: 0;
  transform: rotate(25deg);
}
.feather:hover {
  transform: scale(1.1) rotate(5deg); /* subtle "ruffled" interaction */
}

h1,h2,h3,h4,h5{ 
text-align: center;
color: black;
font-family: "Rock Salt", cursive;
font-size: 200%;
border-style: double;
border-width: 5px;
border-color: #d0a661
}

p{
font-family: "Cormorant", serif;
text-align: center;
color: black;
font-size: 175%;
}

body {
  background: #E7D9C0;
    color: black
}

.jasper-intro {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 2rem;
  padding: 1rem;
  background-color: #f6f1e7;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(60, 45, 30, 0.2);
}

.jasper-img {
  width: 200px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0,0,0,0.15);
}

.jasper-quote {
  font-family: "Cormorant", serif;
  font-style: italic;
  color: #4e3a2d;
}

.jasper-basics {
  background-color: #f0e7d8;
  border-left: 6px solid #a46f49;
  padding: 1.5rem;
  margin: 2rem;
  font-family: "Cormorant", serif;
  box-shadow: 2px 2px 8px rgba(50, 30, 15, 0.1);
  border: 3px solid #d0a661;
}

.jasper-basics h2 {
  font-family: "Rock salt", cursive;
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.jasper-basics ul {
  list-style-type: none;
  padding: 0;
}

.jasper-basics li {
  margin: 0.5rem 0;
  line-height: 1.5;
}

.fun-facts {
  background-color: #fef9f3;
  padding: 2rem;
  margin: 2rem;
  border-left: 6px dashed #d0a661;
  font-family: 'Cormorant', serif;
  position: relative;
}
.fun-facts h2 {
  font-family: 'Rubik Dirt', cursive;
  font-size: 1.8rem;
  margin-bottom: 1rem;
}
.fun-facts p {
  margin: 0.8rem 0;
  padding: 0.5rem 1rem;
  background-color: #fff9ee;
  border: 1px dashed #c4a16b;
  border-radius: 6px;
  transform: rotate(-1deg);
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

.fun-facts p::before {
  content: '🪶';
  margin-right: 0.5rem;
}

.fun-facts p:hover {
  background-color: #faefd7;
  transform: rotate(1deg) scale(1.02);
  box-shadow: 4px 4px 8px rgba(0,0,0,0.15);
}

.jasper-trinkets {
  background-color: #fdf8f3;
  padding: 2rem;
  margin: 2rem auto;
  border: 2px dashed #a46f49;
  max-width: 600px;
  text-align: center;
  font-family: 'Cormorant', serif;
}

.jasper-trinkets h2 {
  font-family: 'Rubik Dirt', cursive;
  margin-bottom: 1rem;
}

.trinket-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem; /* Spacing between trinkets */
  max-width: 600px;
  margin: 0 auto;
}

.trinket {
  flex: 0 0 100px; /* Each trinket takes up 100px of width */
  height: 100px;
  position: relative;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.trinket img {
  max-width: 200px;
  height: auto;
  border: 1px solid #c9b79d;
  border-radius: 6px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

.trinket:hover {
  transform: scale(1.05) rotate(-2deg);
}

/* Top-left "tape" */
.fun-facts::before {
  content: '';
  position: absolute;
  width: 100px;
  height: 20px;
  background-color: #f5d6a0;
  top: -10px;
  left: -10px;
  transform: rotate(-5deg);
  box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
  opacity: 0.8;
  z-index: 1;
}

/* Top-right "tape" */
.fun-facts::after {
  content: '';
  position: absolute;
  width: 100px;
  height: 20px;
  background-color: #f5d6a0;
  top: -10px;
  right: -10px;
  transform: rotate(8deg);
  box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
  opacity: 0.8;
  z-index: 1;
}

.adina-nestmate {
  background-color: #f3e8dc;
  border-left: 4px solid #a5886b;
  padding: 1.5rem;
  margin: 2rem auto;
  max-width: 700px;
  border-radius: 8px;
  font-family: 'Cormorant', serif;
  color: #3a2e2b;
  box-shadow: 2px 2px 5px rgba(120, 93, 65, 0.1);
}

.adina-nestmate .section-title {
  font-family: 'Rock Salt', cursive;
  font-size: 1.6rem;
  color: #8e6b50;
  margin-bottom: 1rem;
}

.adina-nestmate ul {
  padding-left: 1.2rem;
  list-style-type: square;
}

.adina-nestmate li {
  font-family: 'Rubik Dirt', cursive;
  margin-bottom: 0.6rem;
  font-size: 1.05rem;
  color: #5a4c3f;
}

.adina-note {
  margin-top: 1rem;
  font-style: italic;
  font-size: 1rem;
  color: #7b6557;
}

.jasper-eats {
  background-color: #FEFBEA;
  border-left: 4px solid #a68f7d;
  padding: 1.5rem;
  margin: 2rem auto;
  max-width: 700px;
  border-radius: 8px;
  font-family: 'Cormorant', serif;
  color: black;
  box-shadow: 2px 2px 5px rgba(98, 73, 55, 0.1);
}

.section-title {
  font-family: 'Rock Salt', cursive;
  font-size: 1.6rem;
  color: #85614c;
  margin-bottom: 1rem;
}

.jasper-eats ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  font-family: 'Rubik Dirt', cursive;
  color: #5a4637;
  line-height: 2;
}

.digestive-note {
  margin-top: 1rem;
  font-style: italic;
  font-family: 'Cormorant', serif;
  color: #7b6553;
}