/* =========================
   RESET
========================= */

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

/* =========================
   THEME VARIABLES
========================= */

:root{
    --bg:#faf8fc;
    --text:#2f2f2f;
    --secondary:#666;
    --border:rgba(0,0,0,0.08);
}

body.dark{
    --bg:#111111;
    --text:#f4f4f4;
    --secondary:#b0b0b0;
    --border:rgba(255,255,255,0.08);
}

/* =========================
   BODY
========================= */

body{

    background:var(--bg);
    color:var(--text);

    font-family:Georgia, serif;

    min-height:100vh;

    transition:
        background .3s ease,
        color .3s ease;
}

/* =========================
   LOGO
========================= */

.site-header{

    position:fixed;

    top:20px;
    left:25px;

    z-index:1000;
}

.logo{

    font-size:2.6rem;
    font-weight:800;

    font-family:Georgia, serif;

    background:linear-gradient(
        135deg,
        #ff9a9e 0%,
        #ff4d6d 50%,
        #ff758f 100%
    );

    -webkit-background-clip:text;
    background-clip:text;

    color:transparent;

    text-shadow:
        0 0 20px rgba(255,77,109,.25);

    user-select:none;

    transition:.3s ease;
}

.logo:hover{

    transform:scale(1.08);
}

/* =========================
   THEME BUTTON
========================= */

#theme-toggle{

    position:fixed;

    top:20px;
    right:20px;

    width:42px;
    height:42px;

    border-radius:50%;

    border:none;

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

    cursor:pointer;

    font-size:.9rem;

    transition:.3s ease;

    z-index:1000;
}

body.dark #theme-toggle{

    background:#1a1a1a;
    color:#fff;
}

#theme-toggle:hover{

    transform:scale(1.08);
}

/* =========================
   BLOG CONTAINER
========================= */

.container{

    max-width:850px;

    margin:0 auto;

    padding:5rem 2rem;
}

/* =========================
   BLOG TITLE
========================= */

h1{

    font-family:"Cormorant Garamond", serif;

    font-style:italic;

    font-weight:500;

    font-size:5rem;

    margin-top:1rem;

    margin-bottom:.5rem;
}

.subtitle{

    color:var(--secondary);

    font-size:1.1rem;

    margin-bottom:4rem;
}

/* =========================
   POSTS
========================= */

.post{

    display:block;

    text-decoration:none;

    color:inherit;

    padding:2.5rem 0;

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

    transition:.3s ease;
}

.post:last-child{

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

.date{

    color:var(--secondary);

    font-size:.85rem;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:1rem;
}

.title{

    font-family:"Cormorant Garamond", serif;

    font-size:3rem;

    line-height:1.2;

    transition:.3s ease;
}

.post:hover .title{

    background:linear-gradient(
        135deg,
        #ff8fab,
        #ff4d6d,
        #c9184a
    );

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;

    transform:translateX(6px);
}

/* =========================
   BACK LINK
========================= */

.back{

    display:inline-block;

    margin-bottom:2rem;

    color:var(--secondary);

    text-decoration:none;
}

.back:hover{

    color:var(--text);
}

/* =========================
   MOBILE
========================= */

@media (max-width:768px){

    .container{

        padding:5rem 1.5rem;
    }

    h1{

        font-size:4rem;
    }

    .title{

        font-size:2rem;
    }

    .logo{

        font-size:2rem;
    }
}

.article-container{
    max-width:700px;
}

h2{
    font-family:"Cormorant Garamond", serif;

    font-size:2rem;

    margin-top:3rem;
    margin-bottom:1rem;
}

p{
    line-height:1.9;

    margin-bottom:1.5rem;
}

ul{
    padding-left:1.5rem;

    margin-bottom:2rem;
}

li{
    margin-bottom:.75rem;
}