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

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;700&family=Quicksand:wght@400;500;700&display=swap');

/* =========================
   GLOBAL STYLING
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    background-color:#f7efe2;
    background-image:
    radial-gradient(circle at top left, rgba(255,255,255,0.6), transparent 300px),
    url("https://www.transparenttextures.com/patterns/paper-fibers.png");

    color:#4e3b31;
    font-family:'Quicksand', sans-serif;
    line-height:1.8;

    overflow-x:hidden;
}

/* cute text selection */

::selection{
    background:#d7bba8;
    color:white;
}

/* =========================
   FLOATING DECORATIONS
========================= */

body::before{
    content:"☁ ✦ 🍄 ✿ 📖 ✦";
    position:fixed;
    top:20px;
    left:20px;

    font-size:1.2rem;
    opacity:0.25;

    pointer-events:none;
}

body::after{
    content:"✿ 🌿 ✦ ☾";
    position:fixed;
    bottom:20px;
    right:25px;

    font-size:1.3rem;
    opacity:0.3;

    pointer-events:none;
}

/* =========================
   HEADER
========================= */

header{
    text-align:center;

    padding:70px 20px 40px;

    background:
    linear-gradient(rgba(255,248,240,0.88), rgba(255,248,240,0.88)),
    url("https://i.pinimg.com/736x/23/a0/8f/23a08fd378bf257d154812cbc1f36b84.jpg");

    background-size:cover;
    background-position:center;

    border-bottom:3px dashed #d7bba8;

    position:relative;
}

/* decorative stars */

header::after{
    content:"✦ ✦ ✦";
    display:block;
    margin-top:40px;

    color:#b88a6a;
    letter-spacing:12px;

    font-size:1.3rem;
}

/* website title */

header h1{
    font-family:'Fraunces', serif;

    font-size:5rem;
    color:#5d4335;

    margin-bottom:10px;

    text-shadow:2px 2px #f3d8c7;
}

/* subtitle */

.tagline{
    font-size:1.1rem;
    color:#7b5f50;

    font-style:italic;

    margin-bottom:35px;
}

/* =========================
   NAVIGATION
========================= */

nav ul{
    list-style:none;
}

nav li{
    display:inline-block;
    margin:10px 14px;
}

/* magical nav buttons */

nav a{
    text-decoration:none;

    background:#fff8f0;

    padding:12px 22px;

    border-radius:30px;

    color:#5a4334;
    font-weight:700;

    border:2px solid #e7c8b3;

    box-shadow:3px 3px 0px #edd6c8;

    transition:0.3s;
}

nav a:hover{
    background:#f0d8c7;

    transform:
    rotate(-2deg)
    translateY(-2px);

    box-shadow:5px 5px 0px #cda88f;
}

/* =========================
   HERO SECTION
========================= */

.hero{
    padding:100px 20px;
    text-align:center;

    position:relative;
}

.hero::before{
    content:"✿";
    position:absolute;

    top:60px;
    left:15%;

    font-size:3rem;
    opacity:0.2;
}

.hero::after{
    content:"☾";
    position:absolute;

    bottom:50px;
    right:15%;

    font-size:3rem;
    opacity:0.2;
}

.hero-text{
    max-width:850px;
    margin:auto;

    background:rgba(255,248,242,0.75);

    padding:50px;

    border-radius:35px;

    border:2px dashed #d8b5a0;

    backdrop-filter:blur(4px);
}

.hero h2{
    font-family:'Fraunces', serif;

    font-size:3.5rem;

    margin-bottom:25px;

    color:#5c4033;
}

.hero p{
    font-size:1.15rem;

    margin-bottom:40px;

    color:#644d3f;
}

/* =========================
   BUTTONS
========================= */

.button{
    display:inline-block;

    background:#c98e70;

    color:white;

    padding:16px 30px;

    border-radius:40px;

    text-decoration:none;

    font-weight:bold;

    border:2px solid #b97756;

    box-shadow:4px 4px 0px #e5c7b3;

    transition:0.3s;
}

.button:hover{
    transform:
    translateY(-4px)
    rotate(-2deg);

    background:#b97756;
}

/* =========================
   FEATURED SECTION
========================= */

.featured{
    padding:80px 20px;
}

.featured h2{
    text-align:center;

    font-family:'Fraunces', serif;

    font-size:3rem;

    margin-bottom:50px;

    color:#5a4033;
}

.card-container{
    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:35px;
}

/* whimsical cards */

.card{
    width:320px;

    background:#fffaf4;

    padding:35px;

    border-radius:30px;

    border:2px dashed #d9b6a1;

    box-shadow:
    8px 8px 0px #f0d9ca;

    position:relative;

    transition:0.35s;
}

.card:nth-child(2){
    transform:rotate(-2deg);
}

.card:nth-child(3){
    transform:rotate(2deg);
}

.card:hover{
    transform:
    translateY(-8px)
    rotate(-1deg);

    box-shadow:
    10px 10px 0px #dcb8a0;
}

/* tiny decorative flower */

.card::before{
    content:"✿";

    position:absolute;

    top:15px;
    right:20px;

    color:#d4a38b;

    font-size:1.2rem;
}

.card h3{
    font-family:'Fraunces', serif;

    font-size:2rem;

    margin-bottom:18px;

    color:#5a4033;
}

.card p{
    margin-bottom:20px;
}

.card a{
    text-decoration:none;

    color:#b06d4d;

    font-weight:bold;
}

/* =========================
   PAGE INTRO
========================= */

.page-intro{
    text-align:center;

    padding:70px 20px 30px;
}

.page-intro h2{
    font-family:'Fraunces', serif;

    font-size:3rem;

    margin-bottom:15px;
}

/* =========================
   CONTENT GRID
========================= */

.content-grid{
    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:35px;

    padding:40px 20px 90px;
}

.content-card{
    width:320px;

    background:#fffaf4;

    padding:30px;

    border-radius:28px;

    border:2px dashed #d7b8a6;

    box-shadow:7px 7px 0px #efd7c9;

    transition:0.3s;
}

.content-card:hover{
    transform:
    translateY(-6px)
    rotate(1deg);
}

.content-card h3{
    font-family:'Fraunces', serif;

    font-size:2rem;

    margin-bottom:15px;
}

.content-card p{
    margin-bottom:20px;
}

.content-card a{
    text-decoration:none;

    color:#b06d4d;

    font-weight:bold;
}

/* =========================
   QUOTE SECTION
========================= */

.quote-section{
    text-align:center;

    padding:90px 20px;

    background:
    linear-gradient(rgba(244,231,218,0.9), rgba(244,231,218,0.9)),
    url("https://www.transparenttextures.com/patterns/floral-white.png");

    border-top:2px dashed #d8b8a3;
}

.quote-section blockquote{
    font-family:'Fraunces', serif;

    font-size:2.4rem;

    max-width:800px;

    margin:auto auto 20px;

    color:#5f4336;

    font-style:italic;
}

/* =========================
   FOOTER
========================= */

footer{
    text-align:center;

    padding:35px;

    background:#ead8ca;

    color:#5f4336;

    border-top:3px dashed #caa891;

    font-size:0.95rem;
}

/* =========================
   SCROLLBAR
========================= */

::-webkit-scrollbar{
    width:12px;
}

::-webkit-scrollbar-track{
    background:#f6e9dc;
}

::-webkit-scrollbar-thumb{
    background:#d7b39f;
    border-radius:10px;
}

/* =========================
   RESPONSIVE DESIGN
========================= */

@media (max-width:768px){

    header h1{
        font-size:3.3rem;
    }

    .hero h2{
        font-size:2.5rem;
    }

    nav li{
        display:block;
        margin:18px 0;
    }

    .card,
    .content-card{
        width:90%;
        transform:none !important;
    }

    .hero-text{
        padding:35px 25px;
    }

}