/* ===========================================================
   Crystal Born Souls
   main.css
   =========================================================== */

:root {

    /* Primary Brand */

    --primary:        #445EB3;
    --primary-dark:   #31458A;

    /* Nature */

    --emerald:        #319B67;
    --emerald-dark:   #306B51;

    /* Crystal */

    --aqua:           #5FC7BA;
    --aqua-light:     #A4D2C8;

    /* Warm accents */

    --coral:          #ECB4AB;
    --peach:          #E5C9B7;

    /* Backgrounds */

    --background:     #FCFAF7;
    --section:        #F1E4DE;

    /* Text */

    --text:           #2D3A3A;
    --text-light:     #6C7676;

    /* Misc */

    --border:         #DCE5E2;
    --shadow:         rgba(0,0,0,.12);

    --radius:         8px;

    --transition:     .25s ease;
}


/* ===========================================================
   Base
   =========================================================== */

html {
    scroll-behavior: smooth;
}

body {

    margin:0;
    padding:0;

    background:var(--background);

    color:var(--text);

    font-family:
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    line-height:1.65;

}


img{

    max-width:100%;
    height:auto;

}


a{

    color:var(--primary);

    text-decoration:none;

    transition:var(--transition);

}

a:hover{

    color:var(--emerald);

}


/* ===========================================================
   Header
   =========================================================== */

header{

    background:white;

    border-bottom:1px solid var(--border);

    box-shadow:0 2px 12px var(--shadow);

}


header h1{

    color:var(--primary);

    font-size:2.6rem;

    letter-spacing:.08em;

}


/* ===========================================================
   Navigation
   =========================================================== */

nav{

    background:var(--primary);

}

nav a{

    color:white;

    padding:18px;

    display:inline-block;

}

nav a:hover{

    background:var(--emerald);

}


/* ===========================================================
   Hero
   =========================================================== */

.hero{

    display:flex;

    align-items:center;

    gap:4rem;

    background:
        linear-gradient(
            180deg,
            #FCFAF7,
            #F1E4DE
        );

    padding:70px 0;

}

.hero-book{

    flex:0 0 22%;

}

.hero-book img{

    display:block;

    width:100%;

    height:auto;

    border-radius:var(--radius);

    box-shadow:0 12px 28px var(--shadow);

}

.hero-text{

    flex:1;

}

.hero h1{

    margin-top:0;

}

.hero h2{

    color:var(--primary);

    font-size:2.8rem;

}

.hero p{

    font-size:1.2rem;

}

@media (max-width:900px){

    .hero{

        display:block;

        text-align:center;

    }

    .hero-book{

        width:220px;

        max-width:60%;

        margin:0 auto 2rem;

    }

}

/* ===========================================================
   Buttons
   =========================================================== */

.button{

    display:inline-block;

    padding:14px 28px;

    border-radius:var(--radius);

    background:var(--coral);

    color:white;

    font-weight:bold;

    transition:var(--transition);

}

.button:hover{

    background:var(--emerald);

}


/* ===========================================================
   Cards
   =========================================================== */

.card{

    background:white;

    border-radius:var(--radius);

    box-shadow:0 8px 24px var(--shadow);

    padding:30px;

}


/* ===========================================================
   Section headings
   =========================================================== */

h1,h2,h3{

    color:var(--primary);

    font-weight:600;

}

h4,h5{

    color:var(--emerald-dark);

}


/* ===========================================================
   Footer
   =========================================================== */

footer{

    background:var(--emerald-dark);

    color:white;

    padding:40px;

}

footer a{

    color:#A4D2C8;

}




* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    line-height: 1.7;
    color: #43313b;
    background: #faf7f6;
}

.site-header {

    height: 340px;

    background:
        linear-gradient(
            rgba(255,255,255,.25),
            rgba(255,255,255,.55)
        ),
        url("/img/rose-burst-bg-01.jpg");

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

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

}

.header-overlay {

    padding: 2rem 3rem;

    background: rgba(255,255,255,.60);
    backdrop-filter: blur(4px);

    border-radius: 10px;
}

.site-header h1 {

    margin: 0;

    font-size: 3.4rem;
    font-weight: normal;
    letter-spacing: .04em;

    color: #5a2f57;
}

.tagline {

    margin-top: .8rem;

    font-size: 1.25rem;

    color: #6f5066;
}

.content {

    max-width: 1100px;

    margin: auto;

    padding: 50px 40px;
}

.site-footer {

    margin-top: 60px;

    padding: 30px;

    text-align: center;

    color: #888;
    font-size: .9rem;

    border-top: 1px solid #ddd;

    background: white;
}


/* ===========================================================
   Author
   =========================================================== */

.author{

    display:flex;

    align-items:flex-start;

    gap:3rem;

}

.author img{

    flex:0 0 22%;

    width:22%;

    height:auto;

    display:block;

    border-radius:var(--radius);

    box-shadow:0 12px 28px var(--shadow);

}

.author div{

    flex:1;

}

@media (max-width:900px){

    .author{

        display:block;

        text-align:center;

    }

    .author img{

        width:220px;

        max-width:60%;

        margin:0 auto 2rem;

    }

    .author div{

        text-align:left;

    }

}

.site-header h1{

    margin:0;

    color:var(--primary);

    font-size:4rem;

    font-weight:600;

    letter-spacing:.02em;

}

.tagline{

    margin:1rem 0 0;

    color:var(--text-light);

    font-size:1.5rem;

}

.main-nav a{

    padding:.9rem 1.5rem;

}

.header-overlay{

    width:70%;
    max-width:900px;

    margin:0 auto;

    padding:3rem 4rem;

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

    backdrop-filter:blur(4px);

    border-radius:12px;

    box-shadow:0 8px 24px rgba(0,0,0,.08);

    text-align:center;

}

.hero{

    padding:50px 0 70px;

}

.site-header h1{

    margin:0;

    color:var(--primary);

    font-family:Georgia, "Times New Roman", serif;

    font-size:3.2rem;

    font-weight:400;

    letter-spacing:.06em;

    text-transform:uppercase;

    line-height:1.05;

}