/* Define font faces */
@font-face {
    font-family: 'Lemon Milk';
    src: url('fonts/LemonMilk.woff2') format('woff2'),
         url('fonts/LemonMilk.woff') format('woff'),
         url('fonts/LemonMilk.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CMU Serif';
    src: url('fonts/CMUSerif-Roman.woff2') format('woff2'),
         url('fonts/CMUSerif-Roman.woff') format('woff'),
         url('fonts/cmunrm.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Century Gothic';
    src: url('fonts/CenturyGothic.woff2') format('woff2'),
         url('fonts/CenturyGothic.woff') format('woff'),
         url('fonts/GOTHIC.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Quicksand';
    src: url('fonts/Quicksand.woff2') format('woff2'),
         url('fonts/Quicksand.woff') format('woff'),
         url('fonts/Quicksand.ttf') format('truetype');
    font-weight: bolder;
    font-style: normal;
}

/* Define CSS variables */
:root {
    /* Font Variables */
    --font-header: 'Lemon Milk', sans-serif;
    --font-body: 'CMU Serif', serif;
    --font-homepage: 'Century Gothic', sans-serif;
    --font-secondary: 'Quicksand', arial;

    /* Light Theme Default */
    --bg: #f1f1fb;
    --card-bg: #eefffe;
    --search-bg: #fddddf;
    --text: #262842;
    --subheader: #382154;
    --accent: #c05d71;
    --secondary: #5d6e9b;
    --highlight: #CAFFBF;

    /* Navigation Arrows - Light Mode */
    --nav-arrow-bg: rgba(0, 0, 0, 0.5);
    --nav-arrow-color: white;
    --nav-arrow-hover-bg: rgba(0, 0, 0, 0.8);

    /* Overlay Background - Light Mode */
    --slide-overlay-bg: rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] {
    /* Dark Theme */
    --bg: #262842;
    --card-bg: #293961;
    --search-bg: #204b59;
    --text: #E3E4FA;
    --subheader: #fff9c8;
    --accent: #b695c9;
    --secondary: #88A9B3;
    --highlight: #58545F;

    /* Navigation Arrows - Dark Mode */
    --nav-arrow-bg: rgba(255, 255, 255, 0.5);
    --nav-arrow-color: black;
    --nav-arrow-hover-bg: rgba(255, 255, 255, 0.8);

    /* Overlay Background - Dark Mode */
    --slide-overlay-bg: rgba(0, 0, 0, 0.6);
}

/* Apply Fonts to Elements */
body {
    font-family: var(--font-body); /* CMU Serif for body text */
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

/* Header Title */
.blog-title {
    font-size: 3.5rem;
    text-align: center;
    flex: 2;
    font-family: var(--font-header); /* Lemon Milk for header title */
}

/* Paragraphs and Subtitles */
p, .post-content, .jumbotron-content p {
    font-family: var(--font-body); /* CMU Serif for paragraphs and subtitles */
}

/* About, Biography, and Body Text */
.about-box, .author-card, .archives-box, .keyword, .signup-btn {
    font-family: var(--font-homepage); /* Century Gothic for about, bio, and body text */
}

/* Navigation */
.blog-nav {
    font-family: var(--font-header); /* Lemon Milk for navigation */
}

/* Post Titles */
.post-title {
    font-family: var(--font-header); /* Lemon Milk for post titles */
}



.jumbotron-slide-link {
    text-decoration: none; /* Remove underline */
    color: inherit; /* Inherit text color */
    display: block; /* Make the entire slide clickable */
    width: 100%;
    height: 100%;
}

.jumbotron-slide-link:hover .jumbotron-slide {
    text-decoration: none;
    transform: scale(1.02); /* Add hover effect */
    transition: transform 0.3s ease;
}

/* Keywords */
.keyword {
    font-family: var(--font-homepage); /* Century Gothic for keywords */
}



* {
    margin: 0;
    padding: none;
    box-sizing: border-box;
    transition: 0.3s all ease;
}

.container {
    width: 100%;
    max-width: 1600px;
}

/* Header Styles */
.blog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.search-container {
    width: 100%;
    padding-top: 0.5rem;
    padding-bottom: 2.5rem;
    flex: 1;
    margin-right: 2rem;
    color: var(--text);
}

.search-bar {
    width: 100%;
    padding: 0.8rem;
    border: 2px solid var(--secondary);
    border-radius: 25px;
    background: var(--search-bg);
    font-weight: bolder;
    font-size: 1.2rem;
    color: var(--text);
}

.blog-title {
    font-size: 3.5rem;
    text-align: center;
    flex: 2;
    font-family: var(--font-header);
}

.theme-container {
    display: flex;
    justify-content: flex-end;
}

/* Theme Switch */
.theme-switch {
    position: relative;
    display: inline-block;
    width: 120px; /* Increased width */
    height: 34px;
}

.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    padding-top: 35px; /* Adjusted padding for better text alignment */
    font-family: var(--font-header);
    font-weight: bolder;
    font-size: 12px;
    background-color: var(--secondary);
    transition: ease-out 0.4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: var(--card-bg);
    transition: ease-in 0.4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: var(--accent);
}

input:checked + .slider:before {
    transform: translateX(86px); /* Adjusted for 120px width */
}

/* Navigation Styles */
.blog-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding: 0.5rem 0;
    border-bottom: 3px solid var(--secondary);
    font-family: var(--font-header);
}

.blog-nav ul {
    display: flex;
    gap: 1.5rem;
    list-style: none;
}

.blog-nav a {
    text-decoration: none;
    color: var(--text);
    font-weight: bold;
    padding: 0.5rem 1rem;
    border-radius: 20px;
}

.blog-nav a:hover {
    background: var(--highlight);
}

.signup-btn {
    padding: 0.8rem 1.2rem;
    border: none;
    border-radius: 25px;
    background: var(--text);
    color: var(--accent);
    cursor: pointer;
    font-family: var(--font-homepage);
    font-size: 18px;
    font-weight: bold;
}



/* Jumbotron Styles */
.jumbotron {
    height: 600px;
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 2rem;
    position: relative;
    background: var(--card-bg);
}

.jumbotron-slides {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
    position: relative;
}

.jumbotron-slide {
    min-width: 100%;
    height: 100%;
    transition: transform 2.5s ease-in-out;
    position: relative;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    padding: 2rem;
    color: var(--text);
    font-size: 2rem;
}

/* Overlay Fix */
.jumbotron-slide::before {
    content: '';
    position: absolute;
    inset: 0; /* shorthand for top, right, bottom, left: 0 */
    background: var(--slide-overlay-bg);
    z-index: 1;
}

.jumbotron-content {
    position: relative;
    z-index: 2;
    max-width: 80%;
}

/* Jumbotron Content */
.jumbotron-content h2 {
    font-family: var(--font-header); /* Lemon Milk */
}

.jumbotron-content p {
    font-family: var(--font-body); /* CMU Serif */
}

.jumbotron-content .post-keywords {
    display: flex;
    gap: 1rem;
}


/* Navigation Arrows */
.slide-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--nav-arrow-bg);
    color: var(--nav-arrow-color);
    border: none;
    padding: 1rem;
    cursor: pointer;
    z-index: 5; /* Ensure above overlay */
    font-size: 1rem;
    border-radius: 50%;
    transition: background 0.3s ease, color 0.3s ease;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

.slide-nav:hover {
    background: var(--nav-arrow-hover-bg);
}

.prev {
    left: 1rem;
}

.next {
    right: 1rem;
}




/* Main Content Layout */
.main-content {
    display: flex;
    gap: 2rem;
}

.left-column {
    flex: 0 0 68%;
}

.right-column {
    flex: 0 0 30%;
}

/* Post Grid Styles */
.post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.post-card {
    background: var(--card-bg);
    border-radius: 15px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.post-card:hover .post-content {
    flex: 1;
}

.post-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* Post Links */
.post-link {
    font-size: 1.5rem;
    text-decoration: none;
    color: inherit;
    display: block;
}

.post-link:hover .post-card {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.post-content {
    padding: 1rem;
    flex: 0.7;
    transition: flex 0.3s ease;
    font-family: var(--font-body);
}

.post-card:hover .post-content {
    flex: 1;
}

.post-title {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    font-family: var(--font-header);
}

.post-date {
    color: var(--secondary);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.post-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.keyword {
    background: var(--highlight);
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-family: var(--font-homepage);
}

/* Right Column Styles */
.about-box, .author-card, .archives-box {
    width: 100%;
    background: var(--card-bg);
    border: 3px solid var(--secondary); /* Use CSS variable for border color */
    padding: 1rem;
    border-radius: 15px;
    margin-bottom: 2rem;
    font-family: var(--font-homepage);
}

/* Author Card */
.author-card {
    width: 100%;
    display: flex; 
    align-items: center;

}

.author-card img {
    width: 110px; 
    border-radius: 10%; 
}

.author-card .right-bio {
    padding-left: 1.2rem;
    font-family: var(--font-body);
    flex: 1;
}

.author-card h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--text);
}

.author-card h4 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--secondary);
}

.author-card p {
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.5;
}

.archives-box ul {
    list-style: none;
}

.archives-box li {
    margin: 0.5rem 0;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .post-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .container {
        width: 95%;
    }

    .blog-header {
        flex-direction: column;
        gap: 1rem;
    }

    .main-content {
        flex-direction: column;
    }

    .left-column, .right-column {
        flex: 1;
    }

    .post-grid {
        grid-template-columns: 1fr;
    }
}




/* Additional CSS for better blog presentation */
.blog-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
    line-height: 1.6;
    font-family: var(--font-body);
    color: var(--text);
}

.blog-content h1 {
    font-family: var(--font-header);
    font-size: 2.8rem;
    margin-bottom: 1.5rem;
    color: var(--accent);
}

.blog-content h2 {
    font-family: var(--font-header);
    font-size: 1.8rem;
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--accent);
}

.blog-content h3 {
    font-family: var(--font-secondary);
    font-size: 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--subheader);
}

.blog-content h4 {
    font-family: var(--font-homepage);
    font-size: 1.2rem;
    font-weight: bolder;
    margin-top: 1.5rem;
    color: var(--secondary);
}

.blog-content p {
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
    text-align: justify;
    font-weight: normal;
    color: var(--text);
}

 .blog-content ol {
    font-family: var(--font-secondary);
    font-size: 1.2rem;
    font-weight: bold;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}
.blog-content ul {
    font-family: var(--font-body);
    font-size: 1.2rem;
    font-weight: normal;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
    text-indent: 1.2em;
}

.blog-content code {
    background: var(--card-bg);
    font-size: 0.8rem;
    padding: 0rem 0.1rem;
    border-radius: 15px;
    font-family: monospace;
    color: var(--text);
}

/* Styling the code box */
.blog-content pre {
    align-items: center;
    width: 80%;
    background: #282727;
    color: var(--text);
    padding-left: 1.5rem;
    padding-bottom: 0.5rem;
    padding-top: none;
    border-radius: 8px;
    overflow-x: auto;
    position: relative;
}

.blog-content pre code {
    background: none;
    padding: none;
    border-radius: 0;
    font-family: 'Fira Code', monospace;
    font-size: 1rem;
    color: #E8F3F2;
}

/* Styling for syntax highlighting */
.blog-content code .key { color: #ff7300; background: none; font-family: monospace; font-size: 0.8rem; padding: none; }
.blog-content code .codes { color: #E8F3F2; background: none;font-family: monospace;  font-size: 0.8rem;}
.blog-content code .comment { color: #a1c2aa;font-family: monospace;  font-size: 0.8rem;}
.blog-content code .string { color: #92c5ff;font-family: monospace;  font-size: 0.8rem;}
.blog-content code .number { color: #ac93ff;font-family: monospace;  font-size: 0.8rem;}

/* Styling the copy button */
.copy-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--card-bg);
    color: var(--text);
    border: none;
    padding: 5px 8px;
    border-radius: 15px;
    cursor: pointer;
    font-size: 0.9rem;
}

.copy-button:hover {
    background: var(--accent);
}
.blog-content{
    font-weight: normal;
}

.blog-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}

.blog-content table, .blog-content th, .blog-content td {
    border: 1px solid var(--secondary);
    font-weight: normal;
}

.blog-content th, .blog-content td {
    padding: 0.5rem;
    text-align: left;
}

.blog-content th {
    background: var(--card-bg);
}

.blog-content .author-info {
    font-style: italic;
    font-size: 1rem;
    font-weight: normal;
    margin-bottom: 2rem;
    color: var(--text);
}

.blog-content .math {
    font-family: var(--font-body);
    font-size: 1.3rem;
    margin-bottom: 1rem;
}
.blogpost-title {
    font-size: 2.0rem;
    text-align: center;
    padding: 0 15rem; /* Add padding to the sides */
    font-family: var(--font-header); /* Lemon Milk for header title */
    margin: 0; /* Ensure no default margin */
}
.blogpost-header {
    display: flex; /* Use flexbox for alignment */
    justify-content: center; /* Center the title horizontally */
    align-items: center; /* Center the title vertically */
    margin-bottom: 2rem;
    width: 100%; /* Ensure the header takes full width */
}
blockquote {
    font-style: italic;
    font-size: 0.9rem;
    color: var(--text);
    padding: 10px 20px;
    margin: 20px;
    border-left: 5px solid var(--secondary);
    background-color: var(--card-bg);
}
.letter {
    font-size: 2.5rem;
    font-weight: bolder;
}

.in-text{
    font-style: italic;
    font-size: 1rem;
    font-weight: bolder;
    border-radius: 15px;
    font-family: monospace;
    color: var(--text);
}
.links{
    font-size: 1rem;
    font-weight: bolder;
    border-radius: 15px;
    font-family: var(--font-homepage);
    color: var(--accent);
}

.outputs {
    font-size: 1rem;
    font-weight: normal;
    font-family: monospace;
    font-style: normal;
    color: var(--accent);
    width: 75%;
}
.tags {
    display: absolute;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding-bottom: 2.5rem;
}

.tag {
    height: fit-content;
    display: inline-block;
    padding: 0.3rem 0.8rem;
    background: var(--highlight);
    color: var(--text);
    border-radius: 20px;
    text-decoration: none;
    font-family: var(--font-homepage);
    font-weight: bolder;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    transition: background 0.3s ease, color 0.3s ease;
}
.tag-h {
    padding-bottom: 0.5rem;
}
.tag:hover {
    background: var(--accent);
    color: var(--card-bg);
}
/* Banner Image Container */
.banner-img {
    height: 60%;
    max-width: 1200px; /* Adjust based on your design */
    margin: 0 auto; /* Center the banner */
    margin-bottom: 2rem; /* Add spacing below the banner */
    border-radius: 10px; /* Rounded corners */
    overflow: hidden; /* Ensure the image stays within the container */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Banner Image */
.banner-img img {
    width: 100%; /* Make the image responsive */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove extra space below the image */
}