pre[class*="language-"] {
    /* padding: 1em;  */
    margin: 0.5em 0;
    overflow: auto;
    border: 0.1em solid hsl(30deg 26.92% 42.55%);
    border-radius: 0.5em;
    box-shadow: 1px 1px 0.5em black inset;
    direction: ltr;
    white-space: nowrap;
    margin-bottom: 20px;
    background-color: #221c1c;
}

code[class*="language-"] {
    white-space: pre-wrap;
}

html {
    scroll-behavior: smooth;
}

#blog-content {
    color: #d5d5d5; padding: 0; font-size: 20px; margin: 0 0 30px 0;
}

h2 {
    color: #e46f57; 
    font-size: xxx-large; 
    margin: 30px 0 3px 0;
}

h3 {
    color: #e46f57; padding: 0; margin: 0 0 10px 0;
}

@media (min-width: 200px) and (max-width: 540px) {
    h2{
        font-size: xx-large;
    }

    #blog-content {
        padding: 10px;
    }

    h3 {
        padding-left: 10px;
    }
}

@media (min-width: 540px) and (max-width: 768px) {
    h2{
        font-size: xx-large;
    }

    #blog-content {
        padding: 10px;
    }

    h3 {
        padding-left: 10px;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    h2{
        font-size: xxx-large;
    }

    #blog-content {
        padding: 10px;
    }

    h3 {
        padding-left: 10px;
    }
}