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

:root {
/* #5c4a9c purple */
--primary-bg: #191a1b;
--secondary-bg: #191a1b;

--primary-text: #e8e8e8; 
--secondary-text: #fd77d7; 

--accent-color: #fd77d7; 
--accent-hover: #fd77d7; 

--card-bg: #1e1d2f; 
--card-text: #e8e8e8; 

--meta-text: #999; 
--footer-text: #fff;

--font-family: JB;
}

.post {
background: var(--card-bg);
padding: 30px;
border-radius: 20px;
margin-bottom: 40px;
transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
position: relative;
overflow: hidden;
cursor: pointer;
}

.post:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.post h2 {
font-size: 2.2rem;
margin-bottom: 15px;
color: var(--accent-color);
background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.post p {
font-size: 1rem;
margin-bottom: 5px;
color: var(--card-text);
}

.post .meta {
font-size: 0.9rem;
color: var(--meta-text);
margin-bottom: 10px;
}



/* /////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////
///////// POST PAGE LAYOUT
///////////////////////////////////////////////////////////// 
///////////////////////////////////////////////////////////// */

.post-container {
max-width: max-content;
margin: 40px auto;
background: inherit;
}

.post-title {
font-size: 2.8rem;
font-weight: bold;
color: var(--accent-color);
margin-bottom: 15px;
text-align: center;
}

/* Post Meta (Date, Author, etc.) */
.post-meta {
font-size: 1rem;
color: var(--meta-text);
text-align: center;
margin-bottom: 25px;
}


/* Post Content */
.post-content {
font-size: 1.2rem;
line-height: 1.8;
color: var(--card-text);
}



/* Headings Inside Post */
.post-content h2,
.post-content h3 {
color: var(--accent-color);
margin-top: 30px;
font-weight: 700;
}

/* .post-content li {
text-indent: 20px;
} */

.post-content ul{
padding-left: 50px;
}

/* Blockquote (Quotes in Post) */
.post-content blockquote {
font-style: italic;
padding: 15px;
border-left: 5px solid var(--accent-color);
background: rgba(92, 72, 156, 0.1);
margin: 20px 0;
}


/* Images Inside Blog Post */
.post-content img {
max-width: 100%;
display: block;
margin: 20px auto;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Links */
.post-content a {
color: var(--accent-color);
font-weight: bold;
transition: color 0.3s;
}

.post-content a:hover {
color: var(--accent-hover);
}

/* Media Queries for Responsive Adjustments */
@media (max-width: 768px) {
    .post {
        padding: 20px;
        margin-bottom: 20px;
    }

    .post h2 {
        font-size: 1.8rem;
    }

    .post p {
        font-size: 0.9rem;
    }

    .post .meta {
        font-size: 0.8rem;
    }

    .post-container {
        max-width: 90%;
        margin: 20px auto;
    }

    .post-title {
        font-size: 2rem;
    }

    .post-meta {
        font-size: 0.9rem;
    }

    .post-content {
        font-size: 1rem;
        line-height: 1.6;
    }

    .post-content h2,
    .post-content h3 {
        font-size: 1.5rem;
    }

    .post-content ul {
        padding-left: 20px;
    }

    .post-content blockquote {
        padding: 10px;
        border-left-width: 3px;
    }

    .post-content img {
        margin: 10px auto;
    }
}

@media (max-width: 480px) {
    .post {
        padding: 15px;
        margin-bottom: 15px;
    }

    .post h2 {
        font-size: 1.5rem;
    }

    .post p {
        font-size: 0.8rem;
    }

    .post .meta {
        font-size: 0.75rem;
    }

    .post-container {
        max-width: 95%;
        margin: 15px auto;
    }

    .post-title {
        font-size: 1.8rem;
    }

    .post-meta {
        font-size: 0.8rem;
    }

    .post-content {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .post-content h2,
    .post-content h3 {
        font-size: 1.3rem;
    }

    .post-content ul {
        padding-left: 15px;
    }

    .post-content blockquote {
        padding: 8px;
        border-left-width: 2px;
    }

    .post-content img {
        margin: 8px auto;
    }
}