/* ==========================================================================
   sh3ll Theme - Dark terminal style for Hugo
   Based on terminal.css (https://terminalcss.xyz/)
   ========================================================================== */

:root {
    --global-font-size: 16px;
    --global-font-color: #e8e8e8;
    --global-space: 20px;
    --font-color: #e8e8e8;
    --invert-font-color: #222;
    --mono-font-stack:
        "IBM Plex Mono", "Zed Mono", "PxPlus IBM VGA8", "IBM VGA 8x16",
        "Cascadia Mono", "JetBrains Mono", "Menlo", "Monaco", "Lucida Console",
        "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
        "Courier New", monospace;
    --font-stack:
        "IBM Plex Mono", "Zed Mono", "PxPlus IBM VGA8", "IBM VGA 8x16",
        "Cascadia Mono", "JetBrains Mono", "Menlo", "Monaco", "Lucida Console",
        "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
        "Courier New", monospace;
    --global-line-height: 1.6em;
    --page-width: 70em;
    --display-h1-decoration: 1;
    --primary-color: #e06e1a;
    /* --primary-color: #fc9867; */
    --secondary-color: #727578;
    --background-color: #222222;
    --code-bg-color: #222222;
    --block-background-color: #222;
    --tag-color: #333034;
    --tag-hover-color: #e06e1a;
}

@media only screen and (max-width: 850px) {
    :root {
        --global-font-size: 14px;
        --global-font-color: #e8e8e8;
        --global-line-height: 1.6em;
        --page-width: 70em;
    }
}

/* Base styles */
body {
    font-family: var(--font-stack);
    font-size: var(--global-font-size);
    background-color: var(--background-color);
    color: var(--font-color);
    margin-bottom: 75px;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--font-stack);
    clear: both;
    color: var(--primary-color);
}

h1 {
    margin-bottom: 50px;
}

/* Links */
a {
    color: var(--primary-color);
}

a:hover {
    background-color: var(--primary-color);
    color: var(--background-color);
}

/* Labels */
.label {
    font-family: var(--font-stack);
}

/* Buttons */
.btn-ghost {
    color: #999;
    background-color: transparent;
    border-color: #444;
    font-weight: 400;
    font-family: var(--font-stack);
    padding: 6px 12px;
    font-size: 18px;
    line-height: 1.55;
    border-radius: 0;
    margin-left: 0;
    margin-top: 5px;
}

/* Active nav */
.active a {
    text-decoration: underline;
}

strong {
    font-weight: bold;
}

/* Logo / nav */
.logo {
    font-weight: normal;
}

.terminal-menu li {
    margin-right: 30px;
}

/* Figures */
figure {
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 60px;
    margin-right: 60px;
}

/* Footer */
.footer {
    clear: both;
    margin-top: 100px;
    padding-top: 10px;
    border-top: 1px solid var(--secondary-color);
    color: var(--secondary-color);
}

.footer a {
    color: var(--primary-color);
}

/* Terminal prompt animation */
.terminal-prompt::after {
    -webkit-animation: cursor 3s infinite;
    animation: cursor 3s infinite;
    width: 10px;
}

.terminal-prompt::before {
    content: none;
}

/* Gallery */
.gallery-image {
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Posts list */
.posts-list {
    position: relative;
    padding-left: 130px;
    top: 0;
}

.post h1,
.post h2 {
    padding-top: 0;
    margin: 0;
    margin-bottom: 5px;
}

.posts-list .date {
    display: inline-block;
    position: absolute;
    left: 0px;
    width: 130px;
    z-index: 400;
    padding-top: 0;
    color: var(--secondary-color);
}

/* Tags */
.post-tags {
    margin-top: 5px;
    margin-bottom: 10px;
}

.post-tags .tag {
    display: inline-block;
    background-color: var(--tag-color);
    color: var(--font-color);
    padding: 2px 8px;
    margin-right: 5px;
    margin-bottom: 3px;
    font-size: 0.85em;
    border: 1px solid var(--secondary-color);
    text-decoration: none;
}

.post-tags .tag:hover {
    background-color: var(--tag-hover-color);
    color: var(--background-color);
    border-color: var(--tag-hover-color);
}

/* Tags list page */
.tags-list {
    margin-top: 20px;
}

.tag-item {
    margin-bottom: 8px;
}

.tag-link {
    display: inline-block;
    text-decoration: none;
    color: var(--font-color);
    padding: 4px 0;
}

.tag-link:hover {
    color: var(--primary-color);
    background: transparent;
}

.tag-name {
    color: var(--primary-color);
}

.tag-count {
    color: var(--secondary-color);
    margin-left: 8px;
}

/* Post meta */
.post-meta {
    color: var(--secondary-color);
    margin-bottom: 15px;
    font-size: 0.9em;
}

.post-meta a {
    color: var(--primary-color);
}

/* Post navigation */
.post-nav {
    margin-top: 60px;
    padding-top: 15px;
    border-top: 1px dashed var(--secondary-color);
}

/* Post content */
.post-content {
    margin-top: 30px;
}

/* Language switcher */
.lang-switch {
    margin-left: auto;
}

.lang-link {
    color: var(--secondary-color) !important;
    font-weight: bold;
    letter-spacing: 1px;
}

.lang-link:hover {
    color: var(--primary-color) !important;
    background: transparent !important;
}

.lang-inline a {
    color: var(--primary-color);
}

/* Code blocks */
pre {
    background-color: var(--block-background-color);
    border-color: var(--secondary-color);
    color: var(--font-color);
}

code {
    background-color: var(--code-bg-color);
    color: var(--primary-color);
}

/* About page */
.about-section {
    margin-bottom: 30px;
}

.about-links a {
    display: inline-block;
    margin-right: 15px;
    padding: 4px 10px;
    border: 1px solid var(--secondary-color);
    color: var(--font-color);
}

.about-links a:hover {
    border-color: var(--primary-color);
    background-color: var(--primary-color);
    color: var(--background-color);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--background-color);
}

::-webkit-scrollbar-thumb {
    background: var(--secondary-color);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

/* Mobile responsive */
@media only screen and (max-width: 850px) {
    .site-name {
        width: 2ch;
        overflow: hidden;
        display: inline-block;
    }

    .terminal-nav {
        align-items: flex-start;
        flex-direction: column;
        display: flex;
    }

    .terminal-menu ul {
        align-items: flex-start;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: left;
        margin-top: 0;
    }

    .terminal-menu li {
        margin-right: 15px;
    }

    .logo {
        padding: calc(var(--global-space) * 1) 0 calc(var(--global-space) * 1);
    }

    figure {
        margin-top: 5px;
        margin-bottom: 5px;
        margin-left: 30px;
        margin-right: 30px;
    }

    .posts-list {
        position: relative;
        padding-left: 0;
        top: 0;
    }

    .post h1,
    .post h2 {
        padding-top: 0;
    }

    .posts-list .date {
        display: inline-block;
        position: relative;
        left: 0;
        width: auto;
        font-weight: bold;
        padding-top: 0;
        font-size: 0.85em;
    }

    .footer {
        margin-top: 50px;
        padding-top: 5px;
    }

    .lang-switch {
        margin-left: 0;
    }
}