:root {
  --body-afternoon-sky: #FDE1D4;
  --body-afternoon-ground:#2F915A;
  
  --peach-bg:#FEDAAE;
  --vanilla-bg: #FCF8E2;
  --sulphur-bg: #FFFD96;
  --ghost-bg: #ffffff;
  --butter-bg: #FFFED8;
  --hibiscus-bg: #FFE7FC;
  --redrocks-bg: #FFD0CE;
  --winkle-bg: #E3F5FF;
  --lime-bg: #E2FA9F;

  --forest-border: #009241;
  --lingerie-shop-border:#FF4DC9;
  --popsicle-border: #68CAEF;
  --blood-border: #FF5C3C;

  --cherry-text: #B7322D;
  --vine-text: #2F915A;
  --night-forest-text: #00662D;
  --lake-text: #00508D;
  --choco-text: #513C33;
  --night-text: #1C1C1C;
}

body {
  background: var(--body-afternoon-sky, #FDE1D4);

  margin: 0px;
  height: 100vh;

  display: flex;
  flex-direction: column;
}

h1 {
  font-family:  "halyard-display", sans-serif;
  font-weight: 200;
  font-size: 48px;
  font-style: normal;
  margin: 0px;
}

h2 {
  font-family: "Spectral", serif;
  font-weight: 300;
  font-style: normal;
  font-size: 32px;
  margin: 0px;
}

h3 {
  font-family:  "halyard-display", sans-serif;
  font-weight: 200;
  font-size: 32px;
  font-style: normal;
  margin: 0px;
}

a {
  text-decoration: none;
  color: var(--night-forest-text, #2F915A);
}

a:hover {
  color: var(--vine-text, #00662D);
}

p {
  font-family: "Spectral", serif;
  font-weight: 300;
  font-style: normal;
  font-size: 16px;
  margin: 0px;
}

/* body base */

nav {
  display: flex;
  height: 48px;
  padding: 8px 32px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}

nav a {
  font-size: 24px;
  font-weight: 300;
  font-style: normal;
  font-family: "Spectral", serif;
}

.sky {
  background-color: (--body-afternoon-sky, #FDE1D4);
  flex: 2;
  padding: 1rem;
}

.ground {
  background-color: var(--body-afternoon-ground, #2F915A);
  flex: 1;
  padding: 1rem;
}



/* cards base */

.decorative-card-stack {
  position: relative;
  width: min(60vw, 300px);
  aspect-ratio: 2 / 3;
  margin: auto;
  margin-top: 4rem;
}

.card {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  box-sizing: border-box;
}

/* tarot cards */

.basket {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 1rem;
  text-align: center;
  
  background-image: url(basket-card.png);
  background-size: contain;
  background-position: top;

  border: 1px solid var(--blood-border, #FF5C3C);
  background-color: var( --peach-bg, #FEDAAE);

   z-index: 3;
}

.basket h1 {
  color: var(--cherry-text, #B7322D);
  height: 50%;
  margin: 0;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}

.cake {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 1rem;
  text-align: center;

  background-image: url(cake-card.png);
  background-size: contain;
  background-position: top;

  border: 1px solid var(--popsicle-border, #68CAEF);
  background-color: var( --vanilla-bg, #FCF8E2);

   z-index: 3;
}

.cake h1 {
  color: var(--choco-text, #513C33);
  height: 50%;
  margin: 0;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}

.pancake {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 1rem;
  text-align: center;

  background-image: url(pancake-card.png);
  background-size: contain;
  background-position: top;

  border: 1px solid var(--lingerie-shop-border, #FF4DC9);
  background-color: var(--butter-bg, #FFFED8);

   z-index: 3;
}

.pancake h1 {
  color: var(--choco-text, #513C33);
  height: 50%;
  margin: 0;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}

.star {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 1rem;
  text-align: center;

  background-image: url(star-card.png);
  background-size: contain;
  background-position: top;

  border: 1px solid var(--lingerie-shop-border, #FF4DC9);
  background-color: var(--sulphur-bg, #FFFD96);

   z-index: 3;
}

.star h1 {
  color: var(--vine-text, #2F915A);
  height: 50%;
  margin: 0;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}

.bavarois {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 1rem;
  text-align: center;

  background-image: url(bavarois-card.png);
  background-size: contain;
  background-position: top;

  border: 1px solid var(--blood-border, #FF5C3C);
  background-color: var(--redrocks-bg, #FFD0CE);

   z-index: 3;
}

.bavarois h1 {
  color: var(--cherry-text, #B7322D);
  height: 50%;
  margin: 0;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}

.egg {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 1rem;
  text-align: center;

  background-image: url(egg-card.png);
  background-size: contain;
  background-position: top;

  border: 1px solid var(--blood-border, #FF5C3C);
  background-color: var(--butter-bg, #FFFED8);

   z-index: 3;
}

.egg h1 {
  color: var(--night-text, #1C1C1C);
  height: 50%;
  margin: 0;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}

.flower {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 1rem;
  text-align: center;

  background-image: url(flower-card.png);
  background-size: contain;
  background-position: top;

  border: 1px solid var( --forest-border, #009241);
  background-color: var(--ghost-bg, #ffffff);

   z-index: 3;
}

.flower h1 {
  color: var(--night-forest-text, #00662D);
  height: 50%;
  margin: 0;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}

.fan {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 1rem;
  text-align: center;

  background-image: url(fan-card.png);
  background-size: contain;
  background-position: top;

  border: 1px solid var(--blood-border, #FF5C3C);
  background-color: var(--hibiscus-bg, #FFE7FC);

   z-index: 3;
}

.fan h1 {
  color: var(--cherry-text, #B7322D);
  height: 50%;
  margin: 0;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}

.fish {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 1rem;
  text-align: center;

  background-image: url(fish-card.png);
  background-size: contain;
  background-position: top;

  border: 1px solid var(--forest-border, #009241);
  background-color: var(--winkle-bg, #E3F5FF);

   z-index: 3;
}

.fish h1 {
  color: var(--night-forest-text, #00662D);
  height: 50%;
  margin: 0;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}

.dog {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 1rem;
  text-align: center;

  background-image: url(dog-card.png);
  background-size: contain;
  background-position: top;

  border: 1px solid var(--blood-border, #FF5C3C);
  background-color: var(--sulphur-bg, #FFFD96);

   z-index: 3;
}

.dog h1 {
  color: var(--choco-text, #513C33);
  height: 50%;
  margin: 0;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}

.salt {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 1rem;
  text-align: center;

  background-image: url(salt-card.png);
  background-size: contain;
  background-position: top;

  border: 1px solid var(--popsicle-border, #68CAEF);
  background-color: var(--winkle-bg, #E3F5FF);

   z-index: 3;
}

.salt h1 {
  color: var(--lake-text, #00508D);
  height: 50%;
  margin: 0;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}

.tree {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 1rem;
  text-align: center;

  background-image: url(tree-card.png);
  background-size: contain;
  background-position: top;

  border: 1px solid var(--forest-border, #009241);
  background-color: var(--lime-bg, #E2FA9F);

   z-index: 3;
}

.tree h1 {
  color: var(--night-forest-text, #00662D);
  height: 50%;
  margin: 0;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}

.dove {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 1rem;
  text-align: center;

  background-image: url(dove-card.png);
  background-size: contain;
  background-position: top;

  border: 1px solid var(--blood-border, #FF5C3C);
  background-color: var(--hibiscus-bg, #FFE7FC);

  z-index: 3;
}

.dove h1 {
  color: var(--night-text, #1C1C1C);
  height: 50%;
  margin: 0;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}

.tea {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 1rem;
  text-align: center;

  background-image: url(tea-card.png);
  background-size: contain;
  background-position: top;

  border: 1px solid var(--forest-border, #009241);
  background-color: var(--lime-bg, #E2FA9F);

  z-index: 3;
}

.tea h1 {
  color: var(--night-forest-text, #00662D);
  height: 50%;
  margin: 0;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}

/*blank cards*/

.blank-card2 {
  top: 8px;
  left: 8px;
  border: 1px solid var(--lingerie-shop-border, #FF4DC9);
  background-color: var( --butter-bg, #FFFED8);
  z-index: 2;
}
.blank-card1 {
  top: 0;
  left: 0;
  border: 1px solid var(--blood-border, #FF5C3C);
  background-color: var(--hibiscus-bg, #FFE7FC);
  z-index: 1;
}

/*glossary*/

.glossary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px 32px;
  gap: 24px;
}

.about {
  display: flex;
  width: auto;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;

  background: var(--body-afternoon-sky, #FDE1D4);
  box-shadow: 0px 4px 4px 0px rgb(123, 36, 36, 0.25);
}

.text-container {
  max-width: 1400px;
}

.meaning-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: auto;
  align-items: stretch;
  gap: 24px;
  padding-bottom: 48px;
}

.meaning-container .about {
  flex: 1 1 45%;
  flex: 1;
  min-width: 0;
}

.definition-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
}

.text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.definition-container img {
  width: 100px;
  height: 100px;
}

/* Mobile responsive design for glossary */
@media (max-width: 768px) {
  .glossary {
    padding: 0px 16px;
    gap: 16px;
  }
  
  .about {
    padding: 16px;
  }
  
  .meaning-container {
    flex-direction: column;
    gap: 16px;
  }
  
  .definition-container img {
    width: 80px;
    height: 80px;
  }
  
  h2 {
    font-size: 24px;
  }
  
  h3 {
    font-size: 24px;
  }
}