@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Lobster&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

html {
    @apply min-h-screen bg-slate-950;
}

h1 {
    font-family: 'Lobster', cursive, 'Courier New', Courier, monospace;
    @apply text-3xl font-bold;
}

h2 {
    font-family: 'Lobster', cursive, 'Courier New', Courier, monospace;
    @apply text-2xl font-bold;
}

h3 {
    @apply text-xl font-bold;
}

h4 {
    @apply text-lg font-bold;
}

h5 {
    @apply text-base font-bold;
}

h6 {
    @apply text-sm font-bold;
}

a {
    @apply transition text-purple-400 hover:text-purple-600;
}


blockquote p {
    @apply border-l-4 border-purple-400 pl-2;
    container: block;
}

br {
    content: '';
    display: block;
    margin-top: 1em;
}

ul {
    @apply list-disc list-inside;
}

ol {
    @apply list-decimal list-inside;
}

li {
    @apply my-2;
}
p {
    line-height: normal;
}
pre code {
    white-space: pre-wrap;
    display: block;
    padding: 1em;
    background-color: #272822;
    @apply border-purple-400 border rounded-lg;
}

code {
    font-family: 'JetBrains Mono', monospace;
    @apply subpixel-antialiased;
}

/* Code if there is no pre tag before it */
:not(pre) > code {
    @apply p-1 border-purple-800 border rounded-lg;
}

.md-contents h2:not(.md-override) {
}

.md-contents div:not(.md-override) {
    @apply mb-3 mt-3;
}

/* Apply glow effect to separators */
.md-contents hr:not(.md-override) {
    box-shadow: 0 0 10px 1px rgba(255, 255, 255, 0.5);
}

/* Code theme */

.hljs {
    background: #272822;
    color: #ddd;
}

.hljs-tag,
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-strong,
.hljs-number,
.hljs-name {
color: #f92672;
}

.hljs-code {
color: #66d9ef;
}

.hljs-attribute,
.hljs-attr,
.hljs-symbol,
.hljs-regexp,
.hljs-link {
color: #bf79db;
}

.hljs-string,
.hljs-bullet,
.hljs-subst,
.hljs-title,
.hljs-section,
.hljs-emphasis,
.hljs-type,
.hljs-built_in,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-tag,
.hljs-template-variable {
color: #a6e22e;
}

.hljs-title.class_,
.hljs-class .hljs-title {
color: white;
}

.hljs-comment,
.hljs-quote,
.hljs-deletion,
.hljs-meta {
color: #75715e;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-doctag,
.hljs-title,
.hljs-section,
.hljs-type,
.hljs-selector-id {
font-weight: bold;
}