.blog-post {
    margin: 0 auto;
    padding: 0 10vw;
    max-width: 75vw;
}

.blog-content {
    color: var(--primary-light);
    max-width: 60vw;
}


.blog-header {
    padding-bottom: 50px;
    border-bottom: 5px solid var(--primary-light)
}

.blog-header h1 {
    font-size: 3.5rem;
}

.blog-body {
    text-align: left;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.blog-body a {
    color: var(--gradient-03);
}

.blog-body a:hover {
    color: var(--gradient-04);
}

.blog-body code {
    background-color: var(--secondary-blay);
    border-radius: var(--border-radius);
    padding: 0.4rem;
    font-family: 'FiraCode', monospace;
}

.blog-body pre {
    background-color: var(--secondary-blay);
    border-radius: var(--border-radius);
    padding: 1rem;
    margin: 1rem;
    overflow-x: auto;
    font-family: 'FiraCode', monospace;
}


.blog-body pre code {
    background: none;
    padding: 0;
}

.blog-body blockquote {
    border-left: 4px solid var(--secondary-orange);
    padding-left: 1rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: var(--primary-light);
}

.blog-body ul,
.blog-body ol {
    margin-left: 2rem;
    margin-bottom: 1.5rem;
    text-align: left;
}

.blog-body li {
    margin-bottom: 0.5rem;
}

.blog-body hr {
    border: none;
    border-top: 2px solid var(--secondary-blay);
    margin: 2rem 0;
}

.blog-body h1,
.blog-body h2,
.blog-body h3,
.blog-body h4,
.blog-body h5,
.blog-body h6 {
    position: relative;
}

.blog-body .header-anchor {
    position: absolute;
    left: -1.5rem;
    opacity: 0;
    text-decoration: none;
    color: var(--gradient-03);
    transition: opacity 0.2s;
    font-weight: normal;
}

.blog-body h1:hover .header-anchor,
.blog-body h2:hover .header-anchor,
.blog-body h3:hover .header-anchor,
.blog-body h4:hover .header-anchor,
.blog-body h5:hover .header-anchor,
.blog-body h6:hover .header-anchor {
    opacity: 1;
}

.blog-body .header-anchor:hover {
    color: var(--gradient-04);
}

.blog-back-link {
    color: var(--gradient-03);
    text-decoration: none;
    font-family: 'Technotot', monospace;
    font-size: 1.2rem;
    transition: color 0.2s;
}

.blog-back-link:hover {
    color: var(--gradient-04);
}

.blog-back-link i {
    margin-right: 0.5rem;
}

.blog-body img {
    margin: 1.5rem auto;
    height: auto;
    min-height: auto;
    border-radius: var(--border-radius);
    max-width: 500px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.image-description {
    text-align: center;
    color: var(--secondary-blay);
    font-style: italic;
    margin-top: -1rem;
    margin-bottom: 1.5rem;
}

.blog-body table {
    border: none;
    border-collapse: collapse;
    margin: 1.5rem auto;
    width: 100%;
    max-width: 100%;
}

.blog-body table td {
    border: none;
    padding: 0.5rem;
    text-align: center;
    vertical-align: bottom;
}

.blog-body table img {
    margin: 0 auto;
    max-width: min(25vw, 500px);
    min-height: auto;
}

.blog-body table .image-description {
    margin-top: 0.5rem;
    margin-bottom: 0;
}

@media only screen and (max-width: 768px) {
    .blog-post {
        margin: 0 5vw;
        max-width: 90vw;
    }

    .blog-content {
        max-width: 75vw;
    }

    .blog-header h1 {
        font-size: 2rem;
    }

    .blog-body pre {
        margin: 1rem 0;
        padding: 0.75rem;
        font-size: 0.85rem;
    }

    .blog-body code {
        font-size: 0.85rem;
        word-break: break-word;
    }

    .blog-body ul,
    .blog-body ol {
        margin-left: 1rem;
    }

    .blog-body blockquote {
        margin: 1rem 0;
        padding-left: 0.75rem;
    }

    .blog-body img {
        max-width: max(75vw,300px);
        display: block;
        margin-left: auto;
        margin-right: auto;
        height: auto;
        min-height: auto;
        max-height: 450px;
        border-radius: var(--border-radius);
    }
    
    .blog-body table img {
        max-width: max(75vw,300px);
    }

    .blog-body table {
        display: block;
    }

    .blog-body table td {
        display: block;
        width: 100%;
        padding: 0.5rem 0;
    }
}