/* Root Colors */
:root {
    --dark-grey-color: #383434;
    --light-grey-color: #eff1f5;
}

/* Base Styles */
body {
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: #000000;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* Container Styles */
.menu, .content-container {
    margin: 20px auto;
    padding: 20px;
    max-width: 800px; /* Limits the width on larger screens */
}

    /* Styling for Links in the Menu */
    .menu a {
        color: #000;
        font-size: 1.2em;
        text-decoration: none;
    }

    /* Content Container Styling */
    .content-container a {
        text-decoration: underline;
    }

.published {
    font-size: 0.8em;
    margin-top: 10px;
    margin-bottom: 30px;
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
}

.post-title {
    margin-bottom: 0;
    line-height: 1.3;
    font-size: 2em;
}

    .post-title a {
        text-decoration: underline;
    }

p {
    margin-bottom: 20px;
}

/* Code Styling */
pre {
    background-color: #eee;
    border-radius: 5px;
    padding: 10px;
    overflow-x: auto;
}

code {
    font-family: 'Courier New', Courier, monospace;
    color: #d63384;
    background-color: #ddd;
}

/* Enhancements */
.language-cmd {
    color: #007700;
    padding: 2px 4px;
    border-radius: 4px;
}

h1, h2, h3, strong {
    color: #000000;
}

a {
    color: #000;
    font-size: 1.2em;
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

button {
    background-color: #0056b3;
    color: #ffffff;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

    button:hover {
        background-color: #004494;
    }

blockquote {
    border-left: 4px solid var(--light-grey-color);
    border-bottom: 1px solid var(--light-grey-color);
    padding-left: 16px;
    padding-top: 2px;
    margin-left: 0;
    font-style: italic;
    color: var(--dark-grey-color);
    background-color: var(--light-grey-color);
}

    blockquote p {
        display: block;
        margin-bottom: 7px;
        unicode-bidi: isolate;
    }

/* Responsive Styling */
@media (max-width: 768px) {
    .menu, .content-container {
        max-width: 90%; /* Adjusts width on smaller screens */
        padding: 15px;
    }

    .post-title {
        font-size: 1.5em; /* Reduces title size on mobile */
    }

    .menu a, .content-container a {
        font-size: 1em; /* Adjust link font size on mobile */
    }
}



/*HIGHLIGHT JS SYNTAX HIGHTLIGHT*/

pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: 1em
}

code.hljs {
    padding: 3px 5px
}

.hljs {
    background: #eee;
    color: #000
}

.hljs-keyword,
.hljs-literal,
.hljs-symbol,
.hljs-name {
    color: #000
}

.hljs-link {
    color: #000;
    text-decoration: underline
}

.hljs-built_in,
.hljs-type {
    color: #000
}

.hljs-number,
.hljs-class {
    color: #000
}

.hljs-string,
.hljs-meta .hljs-string {
    color: #000
}

.hljs-regexp,
.hljs-template-tag {
    color: #000
}

.hljs-subst,
.hljs-function,
.hljs-title,
.hljs-params,
.hljs-formula {
    color: #000
}

.hljs-comment,
.hljs-quote {
    color: #000;
    font-style: italic
}

.hljs-doctag {
    color: #000
}

.hljs-meta,
.hljs-meta .hljs-keyword,
.hljs-tag {
    color: #000
}

.hljs-variable,
.hljs-template-variable {
    color: #000
}

.hljs-attr,
.hljs-attribute {
    color: #000
}

.hljs-section {
    color: #000
}

.hljs-emphasis {
    font-style: italic
}

.hljs-strong {
    font-weight: bold
}

.hljs-bullet,
.hljs-selector-tag,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
    color: #000
}

.hljs-addition {
    background-color: #144212;
    display: inline-block;
    width: 100%
}

.hljs-deletion {
    background-color: #600;
    display: inline-block;
    width: 100%
}