/* ----------------------------- */
/* 🌼 PAGE BASE */
/* ----------------------------- */

body{
  background:#FFF176;
  color:#3B1F1F;
  font-family:'Cormorant Garamond', serif
  
  margin:0;
  padding:0;

  line-height:2;
  font-size:1.6rem;

  overflow-x:hidden;

  opacity:1;
  transition:opacity .6s ease;
}

body.fade-out{
  opacity:0;
}


/* ----------------------------- */
/* 🌸 BACKGROUND FLOWER MURAL */
/* ----------------------------- */

.flower-layer{
  position:absolute;
  top:0;
  left:0;

  width:100%;
  height:100%;

  pointer-events:none;

  z-index:1;
}

.big-flower{
  position:absolute;

  font-size:120px;

  opacity:.18;

  pointer-events:none;
}


/* ----------------------------- */
/* 🌼 MAIN CONTENT WRAPPER */
/* ----------------------------- */

.container{
  max-width:1200px;
  margin:auto;

  padding:140px 80px;

  position:relative;
  z-index:5;
}


/* ----------------------------- */
/* 🌸 TITLE */
/* ----------------------------- */

h1{
  font-family:'Shadows Into Light', cursive;

  font-size:7rem;
  text-align:center;

  color:#FF4FA3;

  text-shadow:
    6px 6px 0 #FFD60A,
   -6px -6px 0 #00B8D9;

  margin-bottom:5px;
}

.tagline{
  text-align:center;

  font-size:2rem;

  margin-bottom:60px;

  color:#00C853;

  letter-spacing:2px;
  font-style:italic;

  opacity:.9;
}


/* ----------------------------- */
/* 🌼 NAVIGATION */
/* ----------------------------- */

nav{
  text-align:center;
  margin:40px 0;

  font-family:'Gloria Hallelujah', cursive;
}

nav a{
  text-decoration:none;

  margin:0 30px;

  font-size:1.6rem;

  color:#00B8D9;

  position:relative;

  transition:.25s ease;
}

nav a::after{
  content:"";

  position:absolute;
  left:0;
  bottom:-6px;

  width:0%;

  height:4px;

  background:#FF4FA3;

  border-radius:20px;

  transition:.3s ease;
}

nav a:hover::after{
  width:100%;
}


/* ----------------------------- */
/* 🌸 FLOWER DIVIDER */
/* ----------------------------- */

.flower-divider{
  font-size:60px;
  letter-spacing:18px;

  text-align:center;

  margin:15px 0 40px;

  color:#FF4FA3;
}


/* ----------------------------- */
/* 🌼 INTRO LINE */
/* ----------------------------- */

.welcome-line{
  text-align:center;

  font-family:'Gloria Hallelujah', cursive;

  font-size:1.5rem;

  margin:5px 0 60px;

  color:rgba(59,31,31,.65);

  letter-spacing:1px;
}


/* ----------------------------- */
/* 🌸 CONTENT CARDS */
/* ----------------------------- */

.section{
  margin:0 auto 80px;

  padding:80px;

  border-radius:60px;

  background:rgba(255,255,255,.55);

  max-width:700px;
}


/* ----------------------------- */
/* 🌼 HEADINGS */
/* ----------------------------- */

h2{
  font-family:'Gloria Hallelujah', cursive;

  font-size:3.2rem;

  margin-bottom:30px;

  color:#00C853;
}

h2::after{
  content:" ❀";
  color:#FF4FA3;
}


/* ----------------------------- */
/* 🌸 RECENT POST BOX */
/* ----------------------------- */

.recent-box{
  background:#fff;

  padding:45px;

  border-radius:30px;

  margin-top:30px;

  border:5px solid #FF4FA3;

  box-shadow:10px 10px 0 #00B8D9;
}

.recent-box a{
  text-decoration:none;

  color:#FF4FA3;

  font-weight:bold;

  font-size:1.5rem;
}

.recent-box a:hover{
  color:#00C853;
}


/* ----------------------------- */
/* 🌼 PAGE DIVIDER */
/* ----------------------------- */

hr{
  border:none;

  margin:120px 0;

  text-align:center;
}

hr::after{
  content:"✿ ❀ ✿ ❀ ✿";

  font-size:4rem;

  letter-spacing:25px;

  color:#FF4FA3;
}


/* ----------------------------- */
/* 🌸 SIDEBAR LAYOUT */
/* ----------------------------- */

.layout{
  display:flex;

  justify-content:center;

  align-items:flex-start;

  gap:50px;
}


/* ----------------------------- */
/* 🌼 SIDEBAR CARD */
/* ----------------------------- */

.sidebar{
  width:320px;

  padding:70px 50px;

  background:rgba(255,255,255,.45);

  border-radius:60px;

  box-shadow:0 25px 60px rgba(0,0,0,.05);

  font-family:'Gloria Hallelujah', cursive;

  color:#3B1F1F;

  position:sticky;
  top:120px;

  min-height:700px;
}


/* sidebar text */

.sidebar h3{
  font-size:2rem;

  margin-bottom:20px;

  color:#FF4FA3;
}

.sidebar p,
.sidebar li{
  line-height:1.6;

  font-size:1.1rem;
}


/* sidebar list */

.sidebar ul{
  list-style:none;

  padding-left:0;

  margin-bottom:30px;
}

.sidebar li{
  position:relative;

  padding-left:25px;

  margin-bottom:8px;
}

.sidebar li::before{
  content:"❀";

  position:absolute;

  left:0;

  color:#FF4FA3;
}


/* sidebar divider */

.sidebar-divider{
  text-align:center;

  margin:25px 0;

  color:#FF4FA3;

  font-size:1.2rem;
}


/* ----------------------------- */
/* 🌼 FOOTER */
/* ----------------------------- */

.site-footer{
  text-align:center;

  font-family:'Gloria Hallelujah', cursive;

  font-size:1.5rem;

  margin:80px 0 60px;

  color:rgba(59,31,31,.6);

  letter-spacing:1px;
}


/* ----------------------------- */
/* 🌸 GUESTBOOK */
/* ----------------------------- */

.guestbook-section{
  text-align:center;
}

.guestbook-intro{
  font-family:'Gloria Hallelujah', cursive;

  font-size:1.2rem;

  margin-bottom:25px;

  color:rgba(59,31,31,.7);
}

.guestbook-frame{
  border:none;

  border-radius:40px;

  box-shadow:0 20px 50px rgba(0,0,0,.05);
}


/* ----------------------------- */
/* 🌼 HOME BUTTON */
/* ----------------------------- */

.home-button{
  display:inline-block;

  margin-bottom:25px;

  font-family:'Gloria Hallelujah', cursive;

  font-size:1.1rem;

  color:#00B8D9;

  text-decoration:none;
}

.home-button:hover{
  color:#FF4FA3;
}


/* ----------------------------- */
/* 🌼 NAVIGATION */
/* ----------------------------- */

nav{
  text-align:center;
  margin:40px 0;

  font-family:'Gloria Hallelujah', cursive;
}

nav a{
  text-decoration:none;

  margin:0 30px;

  font-size:1.6rem;

  color:#00B8D9;

  position:relative;

  transition:.25s ease;
}

nav a::after{
  content:"";

  position:absolute;
  left:0;
  bottom:-6px;

  width:0%;

  height:4px;

  background:#FF4FA3;

  border-radius:20px;

  transition:.3s ease;
}

nav a:hover::after{
  width:100%;
}


/* ----------------------------- */
/* 🌸 FLOWER DIVIDER */
/* ----------------------------- */

.flower-divider{
  font-size:60px;
  letter-spacing:18px;

  text-align:center;

  margin:15px 0 40px;

  color:#FF4FA3;
}


/* ----------------------------- */
/* 🌼 INTRO LINE */
/* ----------------------------- */

.welcome-line{
  text-align:center;

  font-family:'Gloria Hallelujah', cursive;

  font-size:1.5rem;

  margin:5px 0 60px;

  color:rgba(59,31,31,.65);

  letter-spacing:1px;
}


/* ----------------------------- */
/* 🌸 CONTENT CARDS */
/* ----------------------------- */

.section{
  margin:0 auto 80px;

  padding:80px;

  border-radius:60px;

  background:rgba(255,255,255,.55);

  max-width:700px;
}


/* ----------------------------- */
/* 🌼 HEADINGS */
/* ----------------------------- */

h2{
  font-family:'Gloria Hallelujah', cursive;

  font-size:3.2rem;

  margin-bottom:30px;

  color:#00C853;
}

h2::after{
  content:" ❀";
  color:#FF4FA3;
}


/* ----------------------------- */
/* 🌸 RECENT POST BOX */
/* ----------------------------- */

.recent-box{
  background:#fff;

  padding:45px;

  border-radius:30px;

  margin-top:30px;

  border:5px solid #FF4FA3;

  box-shadow:10px 10px 0 #00B8D9;
}

.recent-box a{
  text-decoration:none;

  color:#FF4FA3;

  font-weight:bold;

  font-size:1.5rem;
}

.recent-box a:hover{
  color:#00C853;
}


/* ----------------------------- */
/* 🌼 PAGE DIVIDER */
/* ----------------------------- */

hr{
  border:none;

  margin:120px 0;

  text-align:center;
}

hr::after{
  content:"✿ ❀ ✿ ❀ ✿";

  font-size:4rem;

  letter-spacing:25px;

  color:#FF4FA3;
}


/* ----------------------------- */
/* 🌸 SIDEBAR LAYOUT */
/* ----------------------------- */

.layout{
  display:flex;

  justify-content:center;

  align-items:flex-start;

  gap:50px;
}


/* ----------------------------- */
/* 🌼 SIDEBAR CARD */
/* ----------------------------- */

.sidebar{
  width:320px;

  padding:70px 50px;

  background:rgba(255,255,255,.45);

  border-radius:60px;

  box-shadow:0 25px 60px rgba(0,0,0,.05);

  font-family:'Gloria Hallelujah', cursive;

  color:#3B1F1F;

  position:sticky;
  top:120px;

  min-height:700px;
}


/* sidebar text */

.sidebar h3{
  font-size:2rem;

  margin-bottom:20px;

  color:#FF4FA3;
}

.sidebar p,
.sidebar li{
  line-height:1.6;

  font-size:1.1rem;
}


/* sidebar list */

.sidebar ul{
  list-style:none;

  padding-left:0;

  margin-bottom:30px;
}

.sidebar li{
  position:relative;

  padding-left:25px;

  margin-bottom:8px;
}

.sidebar li::before{
  content:"❀";

  position:absolute;

  left:0;

  color:#FF4FA3;
}


/* sidebar divider */

.sidebar-divider{
  text-align:center;

  margin:25px 0;

  color:#FF4FA3;

  font-size:1.2rem;
}


/* ----------------------------- */
/* 🌼 FOOTER */
/* ----------------------------- */

.site-footer{
  text-align:center;

  font-family:'Gloria Hallelujah', cursive;

  font-size:1.5rem;

  margin:80px 0 60px;

  color:rgba(59,31,31,.6);

  letter-spacing:1px;
}


/* ----------------------------- */
/* 🌸 GUESTBOOK */
/* ----------------------------- */

.guestbook-section{
  text-align:center;
}

.guestbook-intro{
  font-family:'Gloria Hallelujah', cursive;

  font-size:1.2rem;

  margin-bottom:25px;

  color:rgba(59,31,31,.7);
}

.guestbook-frame{
  border:none;

  border-radius:40px;

  box-shadow:0 20px 50px rgba(0,0,0,.05);
}


/* ----------------------------- */
/* 🌼 HOME BUTTON */
/* ----------------------------- */

.home-button{
  display:inline-block;

  margin-bottom:25px;

  font-family:'Gloria Hallelujah', cursive;

  font-size:1.1rem;

  color:#00B8D9;

  text-decoration:none;
}

.home-button:hover{
  color:#FF4FA3;
}

/* Poems*/

.poem-list{
  list-style:none;
  padding:0;
}

.poem-list li{
  margin-bottom:18px;
  font-size:1.4rem;
}

.poem-list a{
  text-decoration:none;
  color:#FF4FA3;
  font-weight:bold;
}

.poem-list a:hover{
  color:#00B8D9;
}

.poem-date{
  margin-left:12px;
  font-size:1.3rem;
  opacity:.6;
}

.poem-signature{
  text-align:right;
  font-style:italic;
  opacity:0.6;
  margin-top:10px;
}

.poem-page{
max-width:650px;
margin:auto;
text-align:left;
}

.poem-title{
font-family:'Gloria Hallelujah', cursive;
font-size:2.8rem;
margin-bottom:10px;
color:#FF4FA3;
}

.poem-date-page{
font-size:1.2rem;
opacity:.7;
margin-bottom:-50px;
text-align:left;
font-family:'Gloria Hallelujah', cursive;
}

.poem-body{
white-space:pre-line;
line-height:1.9;
font-size:1.3rem;
margin-top:0;
}

.poem-body p{
margin-top:0;
}

/* ----------------------------- */
/* BLOG LIST */
/* ----------------------------- */

.blog-list{
list-style:none;
padding:0;
}

.blog-list li{
margin-bottom:35px;
}

.blog-list a{
font-size:1.5rem;
text-decoration:none;
color:#FF4FA3;
}

.blog-list a:hover{
color:#00B8D9;
}

.post-date{
margin-left:10px;
font-size:1rem;
opacity:.6;
}

.post-preview{
margin-top:6px;
font-size:1.1rem;
opacity:.7;
}


/* ----------------------------- */
/* BLOG POST PAGE */
/* ----------------------------- */

.blog-post{
max-width:700px;
margin:auto;
}

.post-title{
font-family:'Gloria Hallelujah', cursive;
font-size:3rem;
margin-bottom:6px;
color:#FF4FA3;
}

.post-date-page{
font-size:2rem;
opacity:.7;
margin-bottom:20px;
}

.post-body{
line-height:1.9;
font-size:1.25rem;
}

/* SPIRITUAL DIVIDER */

.moon-divider{
text-align:center;
font-size:2rem;
letter-spacing:18px;

margin:20px 0 40px 0;

color:#FF4FA3;

font-family:'Gloria Hallelujah', cursive;
opacity:.85;
}

/* ----------------------------- */
/*  Spiritual Section            */
/* ----------------------------- */

.tarot-week-image{
text-align:center;
margin:20px 0 25px 0;
}

.tarot-week-image img{
max-width:180px;
border-radius:10px;
box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

/* spiritual navigation */

.spiritual-nav{
text-align:center;
margin:25px 0 35px 0;
font-family:'Gloria Hallelujah', cursive;
}

.spiritual-nav a{
text-decoration:none;
margin:0 10px;
font-size:1.2rem;
color:#00B8D9;
transition:.25s;
}

.spiritual-nav a:hover{
color:#FF4FA3;
}

.spiritual-nav .nav-flower{
margin:0 6px;
color:#FF4FA3;
}

/* ----------------------------- */
/*  Journal Section              */
/* ----------------------------- */

.journal-list{
list-style:none;
padding:0;
}

.journal-list li{
margin-bottom:18px;
font-size:1.3rem;
}

.journal-entry-date{
margin-left:10px;
opacity:0.6;
font-size:0.9rem;
}

.journal-date{
opacity:0.6;
margin-bottom:25px;
font-size:1.5rem;
}

/* ----------------------------- */
/*  Tarot Section                */
/* ----------------------------- */

.tarot-image{
text-align:center;
margin:30px 0;
}

.tarot-image img{
max-width:260px;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

/* 🌸 MOBILE LAYOUT */

@media (max-width:900px){

/* prevent sideways scrolling */

html, body{
overflow-x:hidden;
}


/* layout stacks */

.layout{
flex-direction:column;
align-items:center;
gap:40px;
}


/* title */

h1{
font-size:3rem;
text-align:center;
}


/* tagline */

.tagline{
font-size:1rem;
text-align:center;
margin-bottom:30px;
}


/* navigation */

nav{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:10px;
margin-bottom:25px;
}

nav a{
font-size:1.1rem;
}


/* sections */

.section{
width:90%;
max-width:600px;
margin:30px auto;
padding:25px;
}


/* sidebar */

.sidebar{
position:relative;
top:0;

width:90%;
max-width:500px;

min-height:auto;
}


/* background flowers smaller */

.big-flower{
font-size:80px;
opacity:0.12;
}

}