/* override typography */
.prose {
    max-width: 65ch;
    color: rgb(55 65 81); /*text-gray-700*/
}
.prose ol, .prose ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.prose img {
    max-width: 100%;
}
.prose pre {
    overflow-x: auto;
    min-width: fit-content;
    max-width: calc(100vw - 350px);
    background: #1E1E1E;
}
.prose code {
    color: #3b82f6;
    font-weight: 400;
    font-size: .875em;
    background-color: #eff6ff;
    border-radius: 0.25rem;
    padding: 0.25em 0.5rem;
}
.prose code::before, .prose code::after {
    content: ""
}
.prose a {
    color: inherit;
    font-weight: 500;
    text-decoration: underline;
}
.prose a:hover {
    opacity: .8;
    color: #4b5563;
}
.prose blockquote {
    border-left-style: solid;
}

.dark .prose, .dark .prose td {
    color: rgb(209 213 219); /*text-gray-300*/
}
.dark .prose h1, .dark .prose h2, .dark .prose h3, .dark .prose h4, .dark .prose h5, .dark .prose h6, .dark .prose th {
    color: rgb(243 244 246); /*text-gray-100*/
}
.dark .prose code {
    background-color: rgb(30 58 138); /*text-blue-900*/
    color: rgb(243 244 246); /*text-gray-100*/
}
.dark .prose pre>code {
    background-color: transparent;
}

@media (min-width: 1024px) {
    .lg\:prose-xl {
        font-size: 1.25rem;
        line-height: 1.8;
    }
}
.youtube {
    width: 896px;
    height: 525px;
}
@media (max-width: 896px) {
    .youtube {
        width: 100%;
        height: auto;
    }
}
.prose pre::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background: #2d3748;
}
.prose pre::-webkit-scrollbar-thumb {
    background-color: rgb(100 116 139);
}

.html-format {
    max-width: unset;
}